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>
})