純css打造最簡潔下拉菜單-無js-很是實用

先上圖：（點擊圖片可到樓主的我的網站）

 樣式部分：

分全局，一級菜單和二級菜單。初始化二級的ul 的display 默認是隱藏的。

<style>
/*公共全局*/
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
a{ color:#333; text-decoration:none;}

/*一級菜單*/
.nav ul li{ float:left; width:200px; background:#FC0; margin-right:1px; }  /*一級菜單寬度改過，下面二級自動繼承*/
.nav ul li a{ width:100%; line-height:30px;  text-align:center; display:block}
.nav ul li a:hover{ background:#333; color:#fff;}
.nav ul li:hover ul{ display:block;  width:100%;}  //這句是關鍵

/*二級菜單*/
.nav ul li ul{ display:none; width:100%;}
.nav ul li ul li a{ float:left; width:100%; height:30px; line-height:30px;}
.nav ul li ul li a,.nav ul li ul li a:visited{}
.nav ul li ul li a:hover{ background:#333; color:#fff;}
</style>

 結構方面：

二級菜單UL是嵌套在一級的li中。經過樣式的hover來實現讓它display顯示出來。

<div class="nav">
   <ul>
     <li><a href="#">首頁</a></li>
     <li><a href="#">客戶</a>
        <ul>
           <li><a href="#">11</a></li>
           <li><a href="#">22</a></li>
           <li><a href="#">33</a></li>
        </ul>
     </li>
     <li><a href="#">車輛</a>
         <ul>
           <li><a href="#">44</a></li>
           <li><a href="#">55</a></li>
           <li><a href="#">66</a></li>
        </ul>
     </li>
   </ul>
</div>