JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<div class='context_menu_pai' id='menu1'>

        <li class='context_menu'>Editar</li>
        <li class='context_menu'>Acessar</li>
        <li class='context_menu'>Indicou(0)</li>
        <li class='context_menu text_erro'>Bloquear</li>
    
</div>



<table width="100%" border="1" >
    <tr  id="1">
        <td>ID:1</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>


</table>

CSS

body {
        margin: 0;
        color:#484848;
        font-family: Verdana; 
        font-size: 13px;
    }

.selecionado{
background-color:yellow;
}








    .context_menu_pai{
        display: none;
        position: absolute;
        width: 200px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        border-radius: 2px;
    }


    .context_menu { 
        padding: 12px 8px;
        cursor: pointer;
        display: block; 
        color: #484848;
      
    }
    .context_menu:hover { 
        background: #EEEEEE; 
       
    }
    .text_erro {
        color: #F65314;
    }

JavaScript

document.oncontextmenu = function () {
        return false;
    };
sair=function(e){
	var novo=e.toElement;
  
  if (!($(novo).closest('.context_menu_pai').length || $(novo).closest('#'+menu).length)){
    $(".context_menu_pai").hide();
    $('#'+menu).removeClass('selecionado');
    menu=false;
  }
  
};
var menu=false;
    $("tr")
    	.mousedown(function (e) {
        
        // Define a posição do menu
        $('.context_menu_pai').css({
            "margin-left": e.clientX,
            "margin-top": e.clientY
        });
        
        // Exibe o menu
        if (e.button === 2) {
            menu=this.id;
            $("#menu"+this.id).show(); 
            $(".context_menu_pai:not(#menu"+this.id+")").hide();
            $('#'+menu).addClass('selecionado');
        } else {
            $(".context_menu_pai").hide();
            $('#'+menu).removeClass('selecionado');
            menu=false;
        }
    	})
      .on('mouseout',function(e){
      	sair(e);
      })
    ;
    $('.context_menu_pai').on('mouseout',function(e){
      	sair(e);
      })
    ;