Question

怎么用HTML+CSS实现横向2级导航栏，谢谢了啊！！

div id="nav">
<ul>
<li><a href="#"> 菜单一</a>
<dl>
<dd><a href="#">二级菜单一</a></dd>
<dd><a href="#">二级菜单一</a></dd>
<dd><a href="#">二级菜单一</a></dd>
<dd><a href="#">二级菜单一</a></dd>
</dl>
</li>

Answer 1

这个不太好实现。标签的伪类focus可以很好的实现这种效果，但是在IE6下只支持a的伪类hover、active、visited、link。其他的标签在IE6下都没有伪类。所以建议用js，如果是闲来无事可以试一下。

Answer 2

#nav{ background:#CCC;}
#nav ul{ width:980px; margin:auto; height:40px; text-align:center;}
#nav li{ float:left; height:40px; border-right:#999 solid 1px; position:relative;}
#nav li:hover{ background:#999;}
#nav li > a{ display:block; line-height:40px; padding:0 20px;}
#nav li dl{ background:#CCC; position:absolute; width:100%; display:none;}
#nav li:hover dl{ display:block;}
#nav li dd{ padding:10px 0; border-bottom:#999 solid 1px;}

Answer 3

这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码

Answer 4

下面这有 你看看。 纯CSS 是不到 兼容吧