您的位置：首页 > Web前端 > CSS

使用css+js构造的无限级菜单

2013-11-04 08:43 471 查看

先看看效果：

html代码：

<html>
<head>
<style>

ul#menu, ul#menu ul{

list-style:none;

margin:0;

border-bottom:1px solid #DDD;

border-right:1px solid #DDD;

border-left:1px solid #DDD;

width:150px;

padding:0;

font-size:14px;
}

ul#menu li{

border-top:1px solid #DDD;

position:relative;

padding:4px;

}

ul#menu li ul{

position:absolute;

left:150px;

_left:144px;

top:0;

display:none;
}

ul#menu li.over{

background:#EEE;
}

ul#menu li.out{

background:#fff;
}

ul#menu a{

display:block;

text-decoration:none;

color:#000;

_height:0;
}
</style>
<script
type="text/javascript">
function initMenu(event,ul){
if(!ul) ul=
document.getElementById("menu");

li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)

{

li[i].onmouseover =function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";

}catch(e){};

}

li[i].onmouseout =function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";

}catch(e){};

}

}

}

window.onload = initMenu;
</script>
</head>
<body>
<ul
id="menu">
<li>

这是菜单1
<ul>
<li>

这是菜单1
<ul>
<li><ahref="#">这是子菜单</a></li>
<li>

这是菜单1
<ul>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
<li>

这是菜单1
<ul>
<li><ahref="#">这是子菜单</a></li>
<li>

这是菜单1
<ul>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
<li>

这是菜单1
<ul>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
<li>

这是菜单2
<ul>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
<li>

这是菜单3
<ul>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
<li><ahref="#">这是子菜单</a></li>
</ul>
</li>
</ul>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航