JSFiddle - React, Tailwind, and code Playground

HTML

<div class="other"></div>
  <div id="context" class="menu">
    <div class="menu-item">item 1</div>
    <div class="menu-separator"></div>
    <div class="menu-item">item 2</div>
    <div class="menu-item">item 3</div>
  </div>

CSS

body{
  background-color: #111;
  border: 1px solid green;
  height: 256px;
  overflow: hidden;
}

.menu{
  background-color: #333;
  width: auto;
  max-width: 256px;
  height: auto;
  display: inline-block;
  padding: 0px;
  color: lime;
  border-radius: 4px;
  position: absolute;
}

.menu-item{
    white-space: nowrap;
  height: auto;
  margin: 6px;
  margin-left: 0px;
  margin-right: 0px;
  line-height: 1em;
  width: auto;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 6px;
}

.menu-item:hover{
  background-color: #555;
  cursor: pointer;
}

.menu-separator{
  border-bottom: 1px solid yellow;
  width: 100%;
  height: 1px;
  margin: 0px;
  margin-top: 6px;
  margin-bottom: 6px;
  position: relative;
}

.other{
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;
  display: block;
  left: 99px;
  top: 87px;
}

JavaScript

var body = document.getElementsByTagName('body')[0];
var context = document.getElementById('context');
context.style.display = "none";

body.addEventListener('contextmenu', function(e){
  if(e.ctrlKey){
    return;
  }
  else if(e.target == body){
  e.preventDefault();

  var tE = context;
  var tSX = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
  var tSY = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
      
  var tX = e.clientX + tSX;
  var tY = e.clientY + tSY;
      
  tE.style.display = 'block';
  tE.style.left = (tX + 2).toString() + 'px';
  tE.style.top = (tY + 2).toString() + 'px';    
      
  if ((e.pageX - tSX) > (document.body.offsetWidth / 2)){
      tE.style.left = (parseInt(tE.style.left) - tE.offsetWidth - 4).toString() + 'px';
  };
      
  if ((e.pageY - tSY) > (document.body.offsetHeight / 2)){
      tE.style.top = (parseInt(tE.style.top) - tE.offsetHeight - 4).toString() + 'px';
  };
      
  }else{
    e.preventDefault();
  }
}, false );

body.addEventListener('click', function(e){
  if(!e.target.className.match(/^menu/)){
    context.style.display = "none";
  }
});