Question

急急急，网页布局二级导航条div+css，这个效果怎么做呢，在线等。。。

Answer 1

用CSS控制的下拉菜单，在各个浏览器中表现的不够完美，最佳的方法是使用jQuery来制作，代码如下，加了一个缓动的效果：

[HTML部分]
<div id="nav">
<ul>
<li><a href="#">菜单零</a></li>
<li><a href="#">菜单一</a></li>
<ul class="childnav">
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
<li><a href="#">菜单二</a>
<ul class="childnav">
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
<li><a href="#">菜单四</a></li>
<!-- /nav -->
</ul>
</div>

[JS部分]
<script type="text/javascript">
$(document).ready(function(){
$("#nav ul li a").hover(function() {
$(this).parent().find("ul.childnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.childnav").slideUp('slow');
});
});
});
</script>

[CSS部分]
<style type="text/css">
* { padding:0; margin:0; list-style:none; }
#nav {
margin:200px;
}
#nav ul { background:#333; padding:5px; float:left; width:100%; }
#nav li {
float:left;
padding:0 5px;
position:relative;
}
#nav li a {
float:left;
padding:0 5px;
display:block;
text-align:center;
color:#fff;
text-decoration:none;
font-size:12px;
height:18px;
line-height:18px;
}
#nav li a:hover, #nav li a.on {
background:#444;
text-decoration:none;
}
#nav li ul {
display: none;
position: absolute;
left: -2px;
top: 18px;
background: #999;
border-bottom:3px solid #333;
z-index:1000;
}
#nav li ul li {
background:none;
float:none;
padding:0;
}
#nav li ul a {
float:none;
}
#nav li ul a:hover {
background:#888;
}
#nav li:hover ul, #nav li.over ul {
display: block;
z-index:999
}
</style>

追问

我已经做了，不过还是谢谢你

追答

客气了！

Answer 2

css属性！简单一点的就是层的显示和隐藏！