<div class="context-menu">
  <ul>
    <li><a href="home.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div>

.context-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  margin-bottom: 5px;
}

.context-menu a {
  text-decoration: none;
  color: #333;
}

.context-menu a:hover {
  color: #000;
}

// 监听右键点击事件
document.addEventListener("contextmenu", function(event) {
  event.preventDefault(); // 阻止默认的上下文菜单弹出

  // 获取鼠标点击位置
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  // 显示上下文菜单
  var contextMenu = document.querySelector(".context-menu");
  contextMenu.style.left = mouseX + "px";
  contextMenu.style.top = mouseY + "px";
  contextMenu.style.display = "block";
});

// 监听点击事件，隐藏上下文菜单
document.addEventListener("click", function(event) {
  var contextMenu = document.querySelector(".context-menu");
  contextMenu.style.display = "none";
});