Me di cuenta que estas usando jQuery, por lo que no entiendo por que haces uso de la libreria si no la vas a utilizar como realmente es.
Uno de los problemas que veo es en tu función de JS, estas configurando el estilo del elemento #menuCapa pero deberías hacerlo de la siguiente manera:
$("#menuCapa".css("top", event.pageY + "px");
¿Cuál es la diferencia entre pageX/Y y clienteX/Y?
Bueno, una imagen vale más que mil palabras.

pageX/Y se relaciona desde la esquina superior izquierda de toda la página renderizada (incluyendo partes ocultas por el scroll).
Mientras clientX/Y se relaciona desde la esquina superior izquierda desde la parte visible de la página, lo que se ve desde el navegador.
Ahora, también tendriamos que ver como son los estilos del menu, ya que eso puede reflejar la manera en que el menu se muestra y sus acciones que se ejecutan.
Dejo un ejemplo que hice en codePen aquí.
$(document).ready(function(){
var materiaSeleccionada;
$( '#info-materias tbody tr' ).on("contextmenu", function(event) {
event.preventDefault();
$('.custom-menu').toggle(100).css({
top: event.pageY + "px",
left: event.pageX + "px"
});
//Selecciono donde di clic para ejecutar una accion despues
materiaSeleccionada = $(this);
});
$(".custom-menu li").click(function(){
let action = $(this).attr('data-action');
switch(action) {
case "delete":
$(materiaSeleccionada).remove();
break;
case "details":
let nombreMateria = materiaSeleccionada.first().text();
alert("Detalles de la materia " + nombreMateria);
break;
}
// Esconder el menu después de la ejecución
$(".custom-menu").hide(100);
});
$(document).on("mousedown", function (e) {
// Si no se da clic al menu contextual
if (!$(e.target).parents(".custom-menu").length > 0) {
// Escondelo
$(".custom-menu").hide(100);
}
});
});
.mt-2{
margin-top:2em;
}
#info-materias {
cursor:default;
}
.custom-menu {
display: none;
z-index: 1000;
position: fixed;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped" id="info-materias">
<thead>
<tr>
<th>Materia</th>
<th>Tema</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matematicas</td>
<td>Ecuaciones</td>
</tr>
<tr>
<td>Historia</td>
<td>Revolución Mexicana</td>
</tr>
<tr>
<td>Programación web</td>
<td>Crear menu contextual</td>
</tr>
</tbody>
</table>
<ul class='custom-menu'>
<li data-action="delete">Eliminar</li>
<li data-action="details">Ver detalles</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>