css右键菜单 |css content 显示不了

下面是一个使用CSS实现的右键菜单的例子：

.menu {
position: absolute;
top: 0;
left: 0;
width: 150px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #999;
display: none;
}
.menu-item {
padding: 6px 12px;
cursor: pointer;
}
.menu-item:hover {
background-color: #f2f2f2;
}

以上是右键菜单样式的CSS代码。首先，大家需要为菜单元素添加一个绝对定位，以便能够在鼠标右键点击的位置上显示。然后，大家设置一些基本的样式，例如宽度、背景色、边框、阴影等。

接着，大家需要为菜单项添加一些样式。如上述代码所示，大家为每个菜单项设置了一定的内边距和指针，以便让它们看起来更像一个标准的菜单项。同时，大家也使用了:hover伪类，以便当用户鼠标悬停时为该项添加一些反馈。

最后，大家需要使用JavaScript来控制菜单的显示和隐藏。下面是一个常见的示例：

window.addEventListener("contextmenu", function(event) {
event.preventDefault();
var menu = document.querySelector(".menu");
menu.style.top = event.pageY + "px";
menu.style.left = event.pageX + "px";
menu.style.display = "block";
});
window.addEventListener("click", function(event) {
var menu = document.querySelector(".menu");
menu.style.display = "none";
});

这里大家使用了addEventListener()方法来监听右键点击事件。当右键点击事件发生时，大家先通过preventDefault()方法来防止默认行为的发生（即不弹出默认的右键菜单），然后获取到大家之前定义好的菜单元素，并根据鼠标点击的位置动态调整其top和left属性，最后将菜单显示出来。同样的，当用户点击菜单以外的区域时，大家也需要隐藏菜单。