Question

如何用css制作横排二级下拉菜单

Answer 1

<div id="nav">
<ul>
<li>一级导航
<ul>
<li><a href="">二级导航</a></li>
<li><a href="">二级导航</a></li>
<li><a href="">二级导航</a></li>
<li><a href="">二级导航</a></li>
</ul>
</li>
</div>

*{
padding:0;
margin:0;
}

#nav{
width:996px;
margin:0 auto;
margin-top:20px;
}
ul{
list-style:none;
}
#nav > ul > li{
color:#999;
float:left;
width:120px;
padding:10px 5px;
font-size:14px;
text-align:center;
border:1px solid #ddd;
border-radius:10px;
position:relative;
margin-right:10px;
}
#nav > ul > li:hover{
color:#fff;
border:1px solid #09f;
background:#09f;
}
#nav > ul > li > ul{
text-align:center;
position:absolute;
top:36px;
left:-1px;
display:none;
background:#a6a6a6;
border-radius:10px;
}
#nav > ul > li > ul li{
width:120px;
padding:10px 5px;
}
#nav > ul > li > ul li a{
color:#fff;
text-decoration:none;
}