首页帮我使用原生html 写一个右键菜单支持多级

帮我使用原生html 写一个右键菜单支持多级

时间: 2024-09-19 22:06:28 浏览: 26

要在HTML中创建一个支持多级的右键菜单，你可以使用`<contextmenu>`元素配合CSS样式来实现。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* CSS样式 */ .right-click-menu { display: none; position: absolute; background-color: #f9f9f9; min-width: 150px; padding: 8px; } .right-click-menu li { list-style-type: none; margin-bottom: 6px; } .right-click-menu ul { display: none; position: absolute; left: 100%; top: 0; } .right-click-menu ul li { margin-left: 20px; } .right-click-menu li:hover > ul { display: block; } </style> </head> <body>  <div id="rightClickElement" oncontextmenu="showMenu(event)"> 这里是鼠标右键点击的位置 </div>  <ul id="contextMenu" class="right-click-menu"> <li>一级菜单项 1</li> <li>一级菜单项 2 <ul> <li>二级菜单项 1</li> <li>二级菜单项 2</li> </ul> </li> <li>一级菜单项 3</li> </ul> <script> function showMenu(e) { e.preventDefault(); // 阻止浏览器默认的行为（例如跳转） var menu = document.getElementById('contextMenu'); menu.style.display = 'block'; menu.style.top = e.clientY + 'px'; // 获取鼠标的y坐标 menu.style.left = e.clientX + 'px'; // 获取鼠标的x坐标 } </script> </body> </html> ``` 在这个例子中，当用户在`#rightClickElement`上右键点击时，会显示一个包含多级菜单的弹出框。你可以根据需要添加更多的菜单层级。