我正在构建一个也有水平子菜单的水平导航。 Soh Tanaka有一个很好的教程,但子菜单不能正常显示。如何让子菜单正确显示?
下面是HTML:
<ul id="mainNav">
<li><a class="selected" href="#">Home</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
</li>
<li><a href="#">About Us</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
</li>
<li><a href="#">Home Remodels</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
</li>
<li><a href="#">New Home Builds</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
</li>
<li><a href="#">Our Portfolio</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
<li><a href="#">Our Blog</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
</li>
<li><a href="#">FAQ'S</a></li>
<li>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 1</a>
</span>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
这里是CSS:
ul#mainNav {
clear: both;
width: 935px;
height: 39px;
margin: -5px 0 0 0;
padding: 0;
float: left;
list-style-type: none;
position: relative;
background-color: #0d0600;
font: bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
}
ul#mainNav li { float: left; margin: 0; padding: 0; }
ul#mainNav li a { padding: 12px 15px 12px 14px; display: block; text-decoration: none; color: #fff; }
ul#mainNav li a.selected,
ul#mainNav li a:hover { background: #b5a37e url(../_images/bg_mainNav.jpg) repeat-x left top; }
ul#mainNav span {
float: left;
display: none;
padding: 15px 0;
position: absolute;
z-index: 10;
left: 0;
top: 35px;
width: 935px;
background-color: #b5a37e;
color: #fff;
text-transform: none;
}
ul#mainNav li:hover span { display: block; }
ul#mainNav li span a { display: inline; }
ul#mainNav li span a:hover { text-decoration: underline; }
唯一的问题是,在我的working example,子菜单显示不出来。
我会很感激这里的一些指导。
谢谢!
谢谢你捕捉。它现在工作正常。 – fmz 2010-06-25 14:12:53
没问题......当我做第一个子菜单时,我确实记得我...... :)欢呼! – Reigel 2010-06-25 14:29:04