<div class="menu">
  <ul class="menu-options">
    <li class="menu-option">Back</li>
    <li class="menu-option">Reload</li>
    <li class="menu-option">Save</li>
    <li class="menu-option">Save As</li>
    <li class="menu-option">Inspect</li>
  </ul>
</div>
html,
body {
  background: #383838;  
  height: 100%;
}

.menu {
  width: 120px;
  box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  color: white;
  display: none;
}
.menu-options {
  list-style-type: none;
  padding: 10px 0;
}
.menu-option {
  font-weight: 500;
  font-size: 14px;
  padding: 10px 40px 10px 20px;
  cursor: pointer;
}
.menu-option:hover {
  background: rgba(0, 0, 0, 0.2);
}
const menu = document.querySelector(".menu");
let menuVisible = false;

const toggleMenu = command => {
  menu.style.display = command === "show" ? "block" : "none";
  menuVisible = !menuVisible;
};

const setPosition = ({ top, left }) => {
  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  toggleMenu("show");
};

window.addEventListener("click", e => {
  if(menuVisible)toggleMenu("hide");
});

window.addEventListener("contextmenu", e => {
  e.preventDefault();
  const origin = {
    left: e.pageX,
    top: e.pageY
  };
  setPosition(origin);
  return false;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.