下拉菜单（CSS）

标签：style   blog   http   io   color   ar   os   sp   div   

CSS代码：

*{
 margin:0;
 padding:0;
}
#nav{
 background:#eee;
 width:600px;
 height:40px;
 margin:0 auto;    /*居中*/
 }
ul{
 list-style:none;
 }
ul li{
 float:left;
 width:90px;
 line-height:40px;
 text-align:center;
 position:relative;
 }
a{
 text-decoration:none;
 color:#000;
 display:block;

 }
a:hover{
 background:#0F6;
 }    
ul li ul li{
 float:none;
 background:#eee;
 margin-top:2px;
 } 
ul li ul {
 position:absolute;
 top:40px;
 left:0px;
 display：none；    /*先隐藏*/
 }
ul li ul li a:hover{
 background:#06C;
 } 
ul li:hover ul {
 display:block;
 } 

HTML代码：

<div id="nav">
  <ul>
    <li><a href="#">首页</a> </li>
    <li><a href="#">新闻</a>
      <ul>
         <li><a href="#">社会</a></li>
         <li><a href="#">管理</a></li>
         <li><a href="#">财经</a></li>
      </ul>
    </li>
    <li><a href="#">讲座</a>
    <ul>
         <li><a href="#">社会</a></li>
         <li><a href="#">管理</a></li>
         <li><a href="#">财经</a></li>
      </ul>
    </li>
    <li><a href="#">网页</a></li>
  </ul>
</div>

下拉菜单（CSS）

标签：style   blog   http   io   color   ar   os   sp   div   

原文地址：http://www.cnblogs.com/yunian/p/4085924.html