订阅 |

CSS

CSS垂直菜单

作者:dulaifasheng 日期:2007-11-15

字体大小: 小中大

HTML代码

<style>

#navn {
position: absolute;
font-size: 9px;
opacity: 0.8;
}
#navn a {
display: block;
width: 100px;
height: 15px;
padding: 3px 5px 12px;
background: #666;
color: #fff;
text-decoration: none;
}
#navn a:hover {
background: #333;
}
#navn li {
float: left;
clear: left;
width: 120px;
background: #ccc;
padding-bottom: 3px;
}
#navn ul {
position: absolute;
margin-left: 115px;
margin-top: -30px;
}
#navn ul {
display: none;
}
#navn li.show ul {
display: block;
}
#navn li.show li ul {
display: none;
}
#navn li li.show ul {
display: block;
}
</style>

<script language="javascript" type="text/javascript">
function menuFix() {
var sfEls = document.getElementById("navn").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "show";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}
window.onload=menuFix;
</script>

</head>
<body>

<ul id="navn">
<li><a href="#">nav item</a>
<ul>
<li><a href="#">nav item</a>
<ul>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</li>
<li><a href="#">nav item</a>
<ul>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</li>
<li><a href="#">nav item</a>
<ul>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</li>
<li><a href="#">nav item</a>
<ul>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">nav item</a>
<ul>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</li>

</ul>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来自: 本站原创

Tags:

评论: 0 | 引用: 0 | 查看次数: 836

发表评论

你没有权限发表留言！

Powered By PJBlog2 v2.5.0125 CopyRight 2005, Fasheng黑板报 xhtml | css

Processed in 0.078125 second(s) , 2 queries , Nuvola Style For PJBlog2 Design By PuterJam