HTML右键弹出菜单

1.自定义菜单样式

	ul.menu{list-style: none;position: absolute;z-index:9999;visibility: hidden;border:1px solid #5A9CCC;background:#FFF;}
	ul.menu li{text-align: center;font-size: 12px;padding:10px;width:100px;border-bottom:1px solid #5A9CCC;cursor:pointer;}
	ul.menu li.bottom{border-bottom: none;}
	ul.menu li:hover{background:#5A9CCC}  
 
	<ul class="menu" id="menu">
           <li id="sendMsg">发送消息</li>
           <li id="deleteFriend">删除好友</li>
           <li id="addToBlack">加入黑名单</li>
           <li class="bottom">修改备注名</li>
 	</ul>

2.要实现菜单的元素 监听contextmenu事件(实现该事件的元素在鼠标右击的时候会响应执行代码，响应代码里面设置你定义的菜单位置)

$("div").on("contextmenu",function(e){
   var menu=document.getElementById('menu');
   menu.style.visibility='visible';
   menu.style.left=e.clientX+'px'; 

<pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif;">     menu.style.top=e.clientY+'px';</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">	</span>//菜单项事件监听</span>

})