下面給大家介紹一種最精簡、最乾淨的純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; 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; }最終效果
