來自微軟的純CSS下拉式功能表

結合JavaScript的下拉式功能表，純CSS的下拉式功能表我也寫過很多了。不過在微軟 Microsoft Expression Web 的相關網站上看到這個純CSS下拉式功能表的時候，我還是覺得很讚賞。這應該是最精簡、最乾淨的純CSS下拉式功能表了。

先看一下效果（這是我重新實現的）：

下面是實現方法：

首先是菜單的XHTML代碼：

<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></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>

 

不設定任何CSS類，實在是乾淨到極點了（當然，考慮到實際應用的複雜性，我估計你不可能真的什麼都不加。要麼把這段代碼放到一個特定的容器裡，要麼給第一層的ul加一個id或者class。

假設這是在一個新的HTML文檔裡，那麼我們現在沒有任何的CSS定義，這時候的網頁顯示效果是這樣的：

在我們的下拉式功能表中，不需要內補丁、外邊距這些東西，即使需要，我們也要自己重新設定，所以我們首先添加第一條規則：

ul {    margin: 0px;    padding: 0px;}

為了跨瀏覽器安全色，必須同時把外邊距和內補丁都設定為0，因為有的瀏覽器預設使用外邊距，有的則預設使用內補丁。這樣設定以後，頁面上可以看到兩層清單項目前面的縮排都沒了，實心和空心的列表符號也不見了。然後設定第二條規則：

ul li {    float: left;    display: inline;    font: 0.9em Arial, Helvetica, sans-serif;    height: 30px;    width: 100px;    list-style: none;}

這是讓原本各佔一行的li元素變成嵌入式（inline）顯示，另一種說法是把list-item元素變成行內元素。總而言之就是讓li不要各佔一行，並列起來，這樣才能成為菜單。設定後，效果如下：

這樣就得到了下拉式功能表的雛形，當然了，外觀很醜陋，下拉功能也還沒實現。這裡要說明的是，最好給功能表項目設定高度和寬度，否則有可能出現不可預料的結果（取決於頁面或容器的寬度）。為了讓功能表項目看起來像菜單，我們繼續添加規則：

ul li a {    color: #FFF;    text-decoration: none;    line-height: 29px;    width: 91px;    margin: 0px;    padding: 0px 0px 0px 8px;    display: block;    border-right: solid 1px #ccc;    border-bottom:solid 1px #ccc;    background: #808080;}

這一條規則比較長，從作用上說呢，就是加上背景和菜單間的隔離線，把預設有底線藍色的文字變成白色無底線。增加了規則後的效果：

從外觀上，這就已經是我們最終的下拉式功能表樣式了。不過，我們還要在細節上修飾一下，比如讓子功能表和一級菜單的樣式有所區別（當然了，由於字型設定的0.9em，所以在文字大小上已經有區別了，但是還不夠，而且對於中文來說，很多時候我們未必能通過文字大小來區別，因為適合中文的常規文字大小就12px和14px而已），所以我們修改一下子功能表的背景色，並且讓子功能表比一級菜單的高度要小一些。規則：

ul li ul li { height:25px; }ul li ul li a {    background: #666;    line-height:24px;}

這裡包含兩條規則，第一條是將子功能表的清單項目高度由之前統一設定的30px減小為25，第二是將子功能表項的背景改為#666，並且文字行高對應地減小到24設定完成後（清單項目高度-1，減去的1正好是上邊框的1像素），效果如下：

通常我們滑鼠滑過某個功能表項目的時候，要讓它跟其它項目有所區別（表示當前菜單處於啟用狀態，術語叫“高亮” ，所以我們對一級菜單的滑鼠滑過樣式做一下定義：

ul li a:hover { background: #666; }

注意，這裡為滑鼠滑過時設定的背景色和子功能表的背景色一樣，原因？看效果就知道了：

這裡的第二個功能表項目就是滑鼠滑過時候的樣式，這樣就跟彈出的（現在還不會彈出）子功能表背景色一致了。現在整個菜單的樣式都設定完了，但是，這隻是靜態菜單啊，我們要的是會動的。所以工作還沒完成。接下來是什麼呢？當然是預設情況下把二級菜單隱藏起來。我們要寫JS來隱藏他們嗎？No！樣式如下：

ul li ul { visibility: hidden; }

這樣，子功能表並不是像“display:none”一樣不顯示，它還是在那個位置，文檔結構什麼的都沒有發生任何改變，只是看不到它而已，而且下拉式功能表中的連結當然也沒不可以點擊。

最後一條規則，讓滑鼠滑過有下拉項的時候，顯示下拉式功能表。當然我們實際設定的是：如果某一個下拉式功能表的父級元素（一級功能表項目）被滑鼠滑過，那麼就讓該下拉式功能表可以被看見：

ul li:hover ul { visibility: visible; }

這樣就完成了整個設定下拉式功能表製作，當然你還可以進一步修飾這個菜單，比如我們應該讓子功能表中的項目在滑鼠滑過的時候也變色：

ul li ul li a:hover { background: #333; }

最終效果

 

 

 

 

要強調的一點：這個下拉式功能表在各主流瀏覽器（IE6以下的版本除外）中的外觀及行為都是完全一致的。相容性非常好。為什麼不支援IE6呢？因為IE8都出來了，我們是不是應該徹底拋棄那個給網頁設計師帶來無限痛苦的萬惡的IE6了？

如果IE6的相容性對你的網站來說非常重要，那麼你可以參考這盤文章：http://wukangrui.com/2009/06/22/whatever-hover-pseudo-class-without-javascript.html。

本文參考：http://www.microsoft.com/china/expression/newsletter/2008-11/article05.aspx

本文首發自 刀刀部落格，部落格園同步更新。如需轉載，請註明作者及出處。