<!DOCTYPE html>
<html>
<head>
<title>右键菜单实现</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul id='list'>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
css： 
 
 
 
ul{
display: none;
box-shadow: 0px 0px 5px #f4979a;
text-align: center;
width: 160px;
height: 200px;
position: absolute;
margin: 0;
padding: 0;
}
li{
height: 50px;
line-height: 50px;
font-size: 16px;
list-style: none;
border: 1px solid #eee;
}
js：
 
 
 
var el=document.getElementById('list'); //获取右键菜单
document.οncοntextmenu=function(ev){
var ev=ev||event; //兼容性语句 
ev.preventDefault();
var x=ev.clientX;
var y=ev.clientY;
el.style.display='block';
el.style.left=x+'px';
el.style.top=y+'px';
document.οnclick=function(){ //再次点击菜单消失
el.style.display='none';
}
}