html菜单项的点击事件,右键多级菜单点击事件

/p>

ul1{

position: absolute;

display: none;

}

ul{

list-style: none;

}

li{

background-color: burlywood;

width: 100px;

text-align: center;

position: relative;

}

li>ul{

width: 100px;

position: absolute;

left: 98px;

top: -2px;

display: none;

}

#li3>ul{

width: 100px;

position: absolute;

left: 98px;

top: -2px;

display: none;

}

• 我是老大
• 我是老二
• 我是老三
  • 我是l31
  • 我是132
  • 我是133
• 我是老四
  • 我是l41
  • 我是142
    • 我是l421
    • 我是1422
    • 我是1423
  • 我是143
• 我是老五

var ul1=document.getElementById("ul1")

var li3=document.getElementById("li3")

var lis=document.querySelectorAll("#ul1 li")

document.οncοntextmenu=function(){

ul1.style.display="block";

var x = event.clientX;

var y = event.clientY;

//滚动条的高度，宽度

var z =document.body.scrollTop;

var a =document.body.scrollLeft;

// 处理边界情况

ul1.style.left = event.clientX +"px";

ul1.style.top = event.clientY + "px";

// 阻止默认事件

return false;

//使用右键取消菜单

}

document.οnclick=function(){

ul1.style.display="";

}

ul1.οnclick=function(){

//取消冒泡，使用右键点击菜单好用不消失

event.cancelBubble=true;

}

for (var i=0;i

lis[i].οnmοuseοver=function(){

var child =this.children;

//如果；li下有节点

if (child.length>0) {

//过滤其他标签

if (child[0].nodeName=="UL") {

child[0].style.display="block";

}

}

}

lis[i].οnmοuseοut=function(){

var child =this.children;

//如果；li下有节点

if (child.length>0) {

//过滤其他标签

if (child[0].nodeName=="UL") {

child[0].style.display="none";

}

}

}

}