菜单的最后效果：
div+css的水平二级菜单制作教程
不久前，我写在了如何创建一个下拉菜单上的教程CSS和jQuery的，今天我想就如何去创建一个水平subnav简单的导航。
在大多数情况下我们可以达到这个效果纯粹使用CSS，但由于我们必须照顾我们的IE6，我们将使用jQuery的几行以涵盖所有的理由。
制作教程：
1.html 代码
<ul id="topnav">
<li><a href="#">Link</a></li>
<li>
<a href="#">Link</a>
<!--Subnav Starts Here-->
<span>
<a href="#">Subnav Link</a> |
<a href="#">Subnav Link</a> |
<a href="#">Subnav Link</a>
</span>
<!--Subnav Ends Here-->
</li>
<li><a href="#">Link</a></li>
</ul>
|
| ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ font-size: 1.2em; background: url(topnav_stretch.gif) repeat-x; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; /*--Divider for each parent level links--*/ } ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; } /*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/ |
