您的位置：首页 > 其它

多级菜单

2016-07-13 19:21 211 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title></title>
<style
type="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>
<ul
id="ul1">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3
<ul>
<li>我是li3下的li1</li>
<li>我是li3下的li2</li>
<li>我是li3下的li3</li>
</ul>
</li>
<li>我是li4
<ul>
<li>我是li4下的li1</li>
<li>我是li4下的li2
<ul>
<li>我是li4下的li2下的li1</li>
<li>我是li4下的li2下的li2</li>
<li>我是li4下的li2下的li3</li>
</ul>
</li>
<li>我是li4下的li3</li>
</ul>
</li>
<li>我是li5</li>
</ul>
<script
type="text/javascript">
var
ul1 = document.getElementById("ul1");

var
lis = document.getElementsByTagName("li");
document.oncontextmenu
= function() {
ul1.style.display
= "block";
var
x = event.clientX;
var
y = event.clientY;
ul1.style.left
= x + "px";
ul1.style.top
= y + "px";
return
false;
}
document.onclick
= function() {
ul1.style.display
= "none";
}
for
(var i = 0; i
< lis.length; i++) {
lis[i].onmouseover
= function(){
var
child = this.children;
// li有孩子节点
if
(child.length > 0) {
// 过滤其他标签
if
(child[0].nodeName == "UL") {
child[0].style.display
= "block";
}
}
}
lis[i].onmouseout
= function(){
var
child = this.children;
// li有孩子节点
if
(child.length > 0) {
// 过滤其他标签
if
(child[0].nodeName == "UL") {
child[0].style.display
= "none";
}
}
}
}

</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 多级菜单

相关文章推荐

新的分享

章节导航