簡單的二級導航頁面（純css實現，運用display屬性hover）

html代碼

<div class="menu">    
 <ul>    
   <li><a href="#" class="bccolor">首頁</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代碼

body{margin:0px;padding:0px;}    
ul;li{list-style:none;}    
a{display:block;}    
a:link,a:visited{text-decoration: none;color:#000000;}    
.menu{margin:0px auto;width:600px;height:30px;}    
.menu ul{margin:0px;padding:0px;}    
.menu ul li{position:relative;float:left;list-style:none;    
    font-size:14px;width:100px;text-align: center;line-height:30px;    
    margin-right:1px;background:#999999; } 
.menu ul li .bccolor{color:red; font-weight:bold;}
.menu ul li ul{display:none;} 
.menu ul li ul li{margin-top:1px}
.menu ul li:hover{background:red;}
.menu ul li a:hover{color:#fff;}
.menu ul li:hover ul{display:block;position: absolute; left: 0px; top: 30px;}

效果圖：