多级菜单

来源：互联网发布：anaconda python免费吗编辑：程序博客网时间：2024/04/28 18:30

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin:0;

padding:0;

}

#ul1{

position:absolute;

display:none;

}

ul{

list-style:none;

}

li{

background-color: paleturquoise;

color: deeppink;

width:100px;

text-align: center;

position:relative;

font-size:12px;

}

li>ul{

width:100px;

position:absolute;

left:98px;

top:-2px;

display:none;

}

</style>

</head>

<body>

<ulid="ul1">

<li>我是li3

<ul>

</ul>

</li>

<li>我是li4

<ul>

<li>我是li4下的li2

<ul>

</ul>

</li>

</ul>

</li>

</ul>

<scripttype="text/javascript">

varul1 = document.getElementById("ul1");

var lis = document.getElementsByTagName("li");

document.oncontextmenu= function() {

ul1.style.display= "block";

varx = event.clientX;

vary = event.clientY;

ul1.style.left= x + "px";

ul1.style.top= y + "px";

returnfalse;

}

document.onclick= function() {

ul1.style.display= "none";

}

for (var i = 0; i< lis.length; i++) {

lis[i].onmouseover= function(){

varchild = this.children;

// li有孩子节点

if(child.length > 0) {

// 过滤其他标签

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

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

}

lis[i].onmouseout= function(){

varchild = this.children;

// li有孩子节点

if(child.length > 0) {

// 过滤其他标签

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

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

}

</script>

</body>

</html>

0 0