css编写下拉二级菜单

2016-10-11 09:29:12 作者:瀚海沙 下拉菜单, css

       使用css编写下拉菜单,代码简洁。用到a链接的伪类,鼠标经过显示该块,移除则隐藏。

       Html代码如下:  

<ul class="menu">
      <li><a href="#">新闻中心</a></li>  
      <li><a href="#">新闻中心</a>
            <ul class="menu1">
                <li><a href="#">事实</a></li>
                 <li><a href="#">事实</a></li>
                  <li><a href="#">事实</a></li>
            </ul>
      </li> 
      <li><a href="#">新闻中心</a></li> 
      <li><a href="#">新闻中心</a>
         <ul class="menu1">
                <li><a href="#">事实</a></li>
                 <li><a href="#">事实</a></li>
                  <li><a href="#">事实</a></li>
            </ul>
      </li> 
      <li><a href="#">新闻中心</a></li> 
      <li><a href="#">新闻中心</a></li>  
      <div class="clear"></div>   
</ul>


css代码如下:

 *{padding:0px; margin:0px; color:#333;}
 ul.menu{border:1px solid #ccc; margin-top:20px;}
 ul.menu li{list-style: none; float: left;  width:100px; border-right:1px solid #ccc; height: 40px; line-height: 40px; text-align: center;}
 a{ color:#333; text-decoration: none;}
 a:hover{ color:blue;}
 .menu li:hover .menu1{ display: block;}
 .clear{ clear: both;}
 .menu1{ border: 1px solid #ccc; border-top:none; display: none; margin-left: -2px;}
 .menu1 li{ clear: both; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;}


实现效果如下:

© hanhaisha.com. All Rights Reserved

梦里不知岁月匆、梦醒不知韶华过