说明：代码取自网络，CSS中注释为笔者学习时添加，JS中的注释为原文所有！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义右键菜单</title> <style> body,ul,li{ margin:0; padding:0; } body{ font:12px/24px arial; } #menu{ position:absolute; top:-9999px; left:-9999px; width:100px; border-radius:3px;/*圆角*/ list-style-type:none;/*去除样式*/ border:1px solid #8f8f8f;/*黑色*/ padding:2px; background:#fff;/*白色*/ } #menu li{ position:relative; height:24px; padding-left:24px; background:#eaead7; vertical-align:top; } #menu li a{ display:block; color:#333;/*黑色*/ background:#fff; padding-left:5px; text-decoration:none; } #menu li.active{ background:#999; } #menu li.active a{ color:#fff; background:#8f8f8f; } #menu li em{ position:absolute; top:0; left:0; width:24px; height:24px; background:url(img/ico.png) no-repeat; } #menu li em.cur{ background-position:0 0; } #menu li em.copy{ background-position:0 -24px; } #menu li em.paste{ background-position:0 -48px; } </style> <script> window.onload = function () { var oMenu = document.getElementById("menu"); var aLi = oMenu.getElementsByTagName("li"); //加载后隐藏自定义右键菜单 oMenu.style.display = "none"; //菜单鼠标移入/移出样式 for (i = 0; i < aLi.length; i++) { //鼠标移入样式 aLi[i].onmouseover = function () { this.className = "active" }; //鼠标移出样式 aLi[i].onmouseout = function () { this.className = "" } } //自定义菜单 document.oncontextmenu = function (event) { var event = event || window.event; var style = oMenu.style; style.display = "block"; style.top = event.clientY + "px"; style.left = event.clientX + "px"; return false; }; //页面点击后自定义菜单消失 document.onclick = function () { oMenu.style.display = "none" } }; </script> </head> <body> <center>自定义右键菜单，请在页面点击右键查看效果。</center> <ul id="menu"> <li><em class="cut"></em><a href="javascript:;">剪切</a></li> <li><em class="copy"></em><a href="javascript:;">复制</a></li> <li><em class="paste"></em><a href="javascript:;">粘贴</a></li> </ul> </body> </html>