【示例】
-
HTML
<ul id="nav"> <li class="menu2" ><a href="#">查看样式表CSS</a> <ul class="list"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li class="menu2" ><a href="#">CSS参考资料</a> <ul class="list"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li class="menu2" ><a href="#">常见问题</a> <ul class="list"> <li><a href="#">子菜单1</a></li> </ul> </li> <li class="menu2" ><a href="#">投稿</a> </li> <li class="menu2" ><a href="#">翻译文件</a> </li> </ul>
-
CSS
#nav { position: absolute; z-index: 1; left: 0px; top: 124px; width: 700px; height: 30px; padding: 0px 4px; } html>/**/body #nav { left: 40px; top: 112px; } #nav ul { margin: 0px; padding: 0px; } #nav li a { text-decoration: none; } #nav li { list-style: none; text-align: center; font-weight: bold; float: left; } #nav .list { line-height: 20px; text-align: left; padding: 2px; font-weight: normal; } #nav .list a { color: #FF3AC1; text-decoration: none; float: left; width: 100px; padding: 3px 5px 0px 5px; } #nav .list a:hover { color: white; padding: 3px 3px 0px 20px; width: 88px; background-color: #FF3AC1; } #nav .menu1 { width: 120px; height: auto; margin: 6px 4px 0px 0px; border: 1px solid #FF3AC1; background-color: #F1FBEC; color: #FF3AC1; padding: 6px 0px 0px 0px; cursor: hand; overflow-y: hidden; filter: Alpha(opacity=70); -moz-opacity: 0.7; } #nav .menu2 { width: 120px; height: 18px; margin: 6px 4px 0px 0px; background-color: #F5F5F5; color: #999999; border: 1px solid #EEE8DD; padding: 6px 0px 0px 0px; overflow-y: hidden; cursor: hand; }