右键菜单，当然也有二级的

这不是我做的，是YQ君做的，在这里http://yqjun.tk/javascript/javascript-left-key-menu/  我只是收集过来而已

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自定义右键菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/*global*/
html, body, div, ul, li, a {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    overflow: hidden;
    font: 13px/1.5 "Microsoft YaHei";
}
ul {
    list-style: none;
}
a {
    outline: ;
}
/*菜单君*/
#left_key_main_menu {
    display: none;
    position: absolute;
    width: 100px;
}
#left_key_menu_outer li a{
    display: block;
    height: 30px;
    font-size: 12px;
    color: #444;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
}
.left_key_menu_btn_current {
    color: #FFFFFF;
    background: #348CCC;
}
.left_key_main_manu_btn_to_secondary_menu a{
	border-left: 3px solid #348CCC;
}
/*二级什么的*/
#left_key_secondary_menu_id {
	display: none;
}
.left_key_secondary_menu {
    display: none;
    position: absolute;
    width: 120px;
}
/*我不是阴影*/
.shadow_out, .shadow_mid, .shadow_in {
    padding: 1px;
    border:1px solid #FFF;
}
.shadow_in {
    padding: 3px;
    background: #FFF;
    border-color: #BBBBBB;
}
.shadow_mid {
    background: #D8D8D8;
    border-color: #E8E8E8;
}
.shadow_out {
    background: #F3F3F3;
    border-color: #FBFBFB;
}
</style>
<script type="text/javascript">
window.onload = function()
{
	fuLeftKeyMenu();
};
var fuLeftKeyMenu = function()
{
	var oLeftKeyMainMenu = document.getElementById("left_key_main_menu");
    var aLeftKeyMainMenuBtn = oLeftKeyMainMenu.getElementsByTagName("a");
	var aLeftKeyMainMenuBtnToSecondaryMenu = new Array();
    var aLeftKeyMainMenuBtnToSecondaryMenu = myGetElementsByClassName("left_key_main_manu_btn_to_secondary_menu", "left_key_main_menu", "li");
    //初始化 SecondaryMenu 数组
    var aLeftKeySecondaryMenu = new Array();
    var aLeftKeySecondaryMenu = myGetElementsByClassName("left_key_secondary_menu", "left_key_secondary_menu_box", "div");
    var totalLeftKeyMenuBtn = document.getElementsByTagName("a");
    var iMainMenuNewLeft = iMainMenuNewTop = 0;
    var bSecondaryMenuIsOvered = new Array();
    var aSecondaryMenuTop = new Array();//记录 aLeftKeyMainMenuBtn 高度
    var aSecondaryMenuTop = getSecondaryMenuTop(aLeftKeyMainMenuBtn);
    //鼠标右键显示 oLeftKeyMainMenu ，点击其他键则隐藏
    document.onmousedown = function(event)
    {
        var event = event || window.event; //前者用于非IE，后者为IE而写
        stopDefaultLeftKey(event);
        if (event.button != 2)
        {
            hideLeftKeyMainMenu();
        }
        else
        {
            showLeftKeyMainMenu(event);
        }
    };
    //totalLeftKeyMenuBtn样式
    for (var i = 0; i < totalLeftKeyMenuBtn.length; i++)
    {
        //鼠标点击or覆盖 totalLeftKeyMenuBtn ，改变 totalLeftKeyMenuBtn 样式
        totalLeftKeyMenuBtn[i].onmousedown =  totalLeftKeyMenuBtn[i].onmouseover = function()
        {
            for(var elem in totalLeftKeyMenuBtn)
            {
                totalLeftKeyMenuBtn[elem].className = "";
            }
            this.className = "left_key_menu_btn_current";
        };
        //鼠标离开 totalLeftKeyMenuBtn ，恢复 totalLeftKeyMenuBtn 样式
        totalLeftKeyMenuBtn[i].onmouseout = function()
        {
            this.className = "";
        };
    }
    //鼠标覆盖 aLeftKeyMainMenuBtnToSecondaryMenu[i] or aLeftKeySecondaryMenu[i] ，显示 aLeftKeySecondaryMenu[i]
    for (var i = 0; i < aLeftKeyMainMenuBtnToSecondaryMenu.length; i++)
    {
        aLeftKeyMainMenuBtnToSecondaryMenu[i].index = aLeftKeySecondaryMenu[i].index = i;
        aLeftKeyMainMenuBtnToSecondaryMenu[i].onmouseover = aLeftKeyMainMenuBtnToSecondaryMenu[i].onmousedown =  aLeftKeySecondaryMenu[i].onmouseover = function(event)
        {
            var event = event || window.event;
            showLeftKeySecondaryMenu(this.index);
        };
    }
    //鼠标离开 aLeftKeySecondaryMenu[i] or aLeftKeyMainMenuBtnToSecondaryMenu[i] or 点击aLeftKeySecondaryMenu[i] ,隐藏 aLeftKeySecondaryMenu[i]
    for (var i = 0; i < aLeftKeyMainMenuBtnToSecondaryMenu.length; i++)
    {
        aLeftKeyMainMenuBtnToSecondaryMenu[i].index = aLeftKeySecondaryMenu[i].index = i;
        aLeftKeySecondaryMenu[i].onmouseout = aLeftKeySecondaryMenu[i].onmousedown = aLeftKeyMainMenuBtnToSecondaryMenu[i].onmouseout = function()
        {
		    hideLeftKeySecondaryMenu(this.index);
        };
    }
    //禁止 defalutLeftMenu 函数
    var stopDefaultLeftKey = function(event)
    {
        if (event.button == 2)
        {
            document.oncontextmenu = function()
            {
                return false;
            }
        }
    };
    //显示 oLeftKeyMainMenu 函数
	var showLeftKeyMainMenu = function(event)
	{
		oLeftKeyMainMenu.style.display = "block";
		iMainMenuNewTop = (event.clientY + oLeftKeyMainMenu.offsetHeight >= document.body.clientHeight) ? (event.clientY - oLeftKeyMainMenu.offsetHeight) : (event.clientY);
		iMainMenuNewLeft = (event.clientX + oLeftKeyMainMenu.offsetWidth >= document.body.clientWidth) ? (event.clientX - oLeftKeyMainMenu.offsetWidth) : (event.clientX);
		oLeftKeyMainMenu.style.left = iMainMenuNewLeft + "px";
		oLeftKeyMainMenu.style.top = iMainMenuNewTop + "px";
    };
    //隐藏 oLeftKeyMainMenu 函数
    var hideLeftKeyMainMenu = function()
    {
        oLeftKeyMainMenu.style.display = "none";
    };
    //显示 aLeftKeySecondaryMenu[index] 函数
    var showLeftKeySecondaryMenu = function(index)
    {
        aLeftKeySecondaryMenu[index].style.display = "block";
		aLeftKeySecondaryMenu[index].style.left = (iMainMenuNewLeft + oLeftKeyMainMenu.offsetWidth + aLeftKeySecondaryMenu[index].offsetWidth >= document.body.clientWidth) ? (iMainMenuNewLeft - aLeftKeySecondaryMenu[index].offsetWidth + "px") : (iMainMenuNewLeft + oLeftKeyMainMenu.offsetWidth + "px");
        aLeftKeySecondaryMenu[index].style.top = iMainMenuNewTop + aSecondaryMenuTop[index] * aLeftKeyMainMenuBtn[0].offsetHeight  +"px";
        bSecondaryMenuIsOvered[index] = true;
        aLeftKeyMainMenuBtnToSecondaryMenu[index].getElementsByTagName("a")[0].className = "left_key_menu_btn_current";
	};
	// 隐藏 aLeftKeySecondaryMenu[index] 函数
    var hideLeftKeySecondaryMenu = function(index)
	{
		var sleep = function()
		{
			if (bSecondaryMenuIsOvered[index] == false)
			{
				aLeftKeySecondaryMenu[index].style.display = "none";
			}
		}
		setTimeout(sleep, 200);
		bSecondaryMenuIsOvered[index] = false;
		aLeftKeyMainMenuBtnToSecondaryMenu[index].getElementsByTagName("a")[0].className = "";
	}
};
var myGetElementsByClassName = function(className, id, node)
{
    var aResult = new Array();
    var oBoxId = document.getElementById(id);//范围
    var aNode = oBoxId.getElementsByTagName(node);//范围内标签
    for (var i = 0; i < aNode.length; i++)
    {
        if (aNode[i].className == className )
        {
          aResult[aResult.length] = aNode[i];
        }
    }
    return aResult;
}
var getSecondaryMenuTop = function ()
{
    var aResult = new Array();
    var aBtnLi = document.getElementById("left_key_menu_outer").getElementsByTagName("li");
    for (var i = 0; i < aBtnLi.length; i++)
    {
        if(aBtnLi[i].className.indexOf("left_key_main_manu_btn_to_secondary_menu") != -1)
        {
            aResult[aResult.length] = i;
        }
    }
    return aResult;
}
</script>
</script>
</head>
<body>
<div id="left_key_menu_outer">
	<div id="left_key_main_menu" class="shadow_out">
		<div class="shadow_mid">
			<div class="shadow_in">
				<ul>
					<li><a href="javascript:;">菜单什么的</a></li>
					<li><a href="javascript:;">菜单什么的</a></li>
					<li class="left_key_main_manu_btn_to_secondary_menu"><a href="javascript:;">二级什么的</a></li>
					<li><a href="javascript:;">菜单什么的</a></li>
					<li><a href="javascript:;">菜单什么的</a></li>
					<li class="left_key_main_manu_btn_to_secondary_menu"><a href="javascript:;">二级二号XD</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="left_key_secondary_menu_box">
		<div class="left_key_secondary_menu" class="shadow_out">
			<div class="shadow_mid">
				<div class="shadow_in">
					<ul>
						<li><a href="javascript:;">人家才不是二级</a></li>
						<li><a href="javascript:;">人家才不是二级</a></li>
						<li><a href="javascript:;">人家才不是二级</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="left_key_secondary_menu" class="shadow_out">
			<div class="shadow_mid">
				<div class="shadow_in">
					<ul>
						<li><a href="javascript:;">又一个二级卖萌</a></li>
						<li><a href="javascript:;">又一个二级卖萌</a></li>
						<li><a href="javascript:;">又一个二级卖萌</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>