JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class='context_menu_pai' id='menu2'>
  <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="2">
    <td>ID:2</td>
    <td>Nome</td>
    <td>Idade</td>
  </tr>



</table>

CSS

body {
   margin: 0;
   color: #484848;
   font-family: Verdana;
   font-size: 13px;
 }
 
 .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;
};
// Verifica se abre o menu
$("tr").mousedown(function (e) {

    // Define a posição do menu            
    $('.context_menu_pai').css({
        "margin-left": e.clientX,
        "margin-top": e.clientY
    }).show();


    // Verifica qual botão clicou
    if (e.button === 2) {
        $("#menu" + this.id).show();
        $(".context_menu_pai:not(#menu" + this.id + ")").hide();

        // Adiciona CSS na linha selecionada
        $("#" + this.id).addClass('context_menu_select');
    } else {
        // Fecha menu
        $(".context_menu_pai").hide();
    }
});