The right-click context menu keeps appearing at the top of the page before clicking, even though I have set display: none in the CSS.
$(document).on('mousedown', function(event) {
if (event.which == 3) {
$('#context').css({
top: event.pageY,
left: event.pageX
});
$('#context').show();
}
});#context {
display: inline-block;
position: absolute;
background: #fff;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
display: none;
}
.context-menu {
list-style: none;
padding: 0px;
margin: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="context">
<ul class="context-menu">
<li> <a href="#">Back</a></li>
<li> <a href="#">Forward</a></li>
<li> <a href="#">Save As...</a></li>
<li> <a href="#">Reload</a></li>
<li> <a href="#">Inspect Element</a></li>
</ul>
</div>