瀚海沙

       使用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;}

实现效果如下：