我们在浏览器上点击右键会出现一些经常见的菜单，下面我将介绍如何自定义自己的菜单。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<!-- saved from url=(0035) -->
<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自定义右键菜单</title>
<style type="text/css">
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 type="text/javascript">
	window.onload = function(){
		var ul = document.getElementById("menu"); //获取ul节点对象
		/*为document绑定鼠标右键菜单事件*/
		document.oncontextmenu = function(e){
			var _event = window.event||e;  //事件对象
			var x  = _event.clientX; // 鼠标的x坐标
			var y =  _event.clientY; //鼠标的y坐标
			ul.style.left = x + "px";  //改变ul的坐标
			ul.style.top = y  + "px";  
			//阻止默认行为
			if(_event.preventDefault){
				_event.preventDefault();  //标准格式
			}else{
				_event.returnValue = false; //IE格式
			}
		}
	}
</script>
</head>
<body>
<center>自定义右键菜单，请在页面点击右键查看效果。</center>
<ul id="menu" style="display: block; top: 54px; left: 645px;">
    <li class=""><em class="cut"></em><a href="javascript:;">剪切</a></li>
    <li class=""><em class="copy"></em><a href="javascript:;">复制</a></li>
    <li class=""><em class="paste"></em><a href="javascript:;">粘贴</a></li>
</ul>
</body></html>
最重要的是要取消浏览器默认行为，注意兼容问题。