1. 前言
下拉菜單也是使用頻率很高的網頁控件，例如百度首頁上方的【設定】按鈕就是一個下拉菜單，當我們的滑鼠指向該按鈕時，會彈出下拉菜單。
本篇我們就通過CSS來一步一步編寫一個簡單的下拉菜單。
2. 開發過程
2.1 HTML元素組成
首先我們确定下HTML元素部分，有一個按鈕button，然後按鈕下面是菜單區域div，菜單區域包含多個連結a。然後下拉菜單作為一個整體，我們用一個div包裹起來。是以HTML代碼如下：
<body>
<div class="dropdown">
<button class="dropdown-button">下拉菜單</button>
<div class="dropdown-menu">
<a href="#">菜單1</a>
<a href="#">菜單2</a>
<a href="#">菜單3</a>
</div>
</div>
</body>
其中drowdown表示下拉菜單，dropdown-button表示按鈕，dropdown-menu表示菜單區域。此時由于尚未編寫任何CSS樣式代碼，效果如下：
2.2 設定按鈕樣式
我們一步一步來處理下拉菜單，首先編寫按鈕的樣式，代碼如下，注意看注釋：
/* 按鈕樣式 */
.dropdown-button {
/* 顔色采用之前用過的百度藍 */
background-color: #4569FF;
/* 字型采用白色 */
color: white;
/* 不要邊框線 */
border: none;
/* 使用圓角 */
border-radius: 8px;
/* 将按鈕撐的大一些 */
padding: 8px;
}
此時效果如下：
另外我們希望當滑鼠懸停到下拉菜單區域時，按鈕顔色能變化，這樣有一個動态的效果，是以添加CSS代碼：
/* 當滑鼠懸停于下拉菜單上方時，按鈕樣式 */
.dropdown:hover .dropdown-button {
background-color: blue;
此時當滑鼠移到下拉菜單上方時，顔色變化為更深的藍色。
2.3 設定菜單區域樣式
首先菜單區域預設應該是不顯示的，然後應設定一個寬度和邊框，讓下拉菜單區域能夠有一個好看的邊界：
/* 下拉菜單 */
.dropdown-menu {
/* 預設不顯示 */
display: none;
/* 設定寬度 */
width: 160px;
/* 設定邊框 */
border: 2px solid #E5F1FB;
當滑鼠懸停到下拉菜單上方時，菜單區域應顯示出來：
/* 滑鼠懸停時，顯示菜單區域 */
.dropdown:hover .dropdown-menu {
display: block;
是以懸停時，效果如下：
2.4 設定菜單中連結樣式
菜單中的超級連結應該是垂直排列，此時我們可以調整其盒模型為block，這樣就獨占一塊了。另外連結字型設為黑色，并通過padding增大間距。
/* 連結樣式 */
.dropdown-menu a {
/* 換行 */
/* 黑色字型 */
color: black;
/* 增大間距 */
padding: 8px 12px;
/* 去掉下劃線 */
text-decoration: none;
然後我們再給滑鼠懸停的連結增加一個選中效果：
/* 連結懸停樣式 */
.dropdown-menu a:hover {
/* 顔色值為按鈕預設顔色，有呼應效果 */
background-color: #4569FF
懸停時，效果如下：
2.5 設定下拉菜單樣式
還有一個非常重要的點，可能不容易發現，就是目前下拉菜單整體是一個div，它會占用一個塊，也就是說整行的空間都被其占用。表現為滑鼠移到下拉菜單右側時，也會引發菜單區域展開。
但是我們實際希望下拉菜單，隻占用看到的那些區域就OK，此時很簡單，設定盒模型為inline-block即可，行内-塊級元素，即占據空間，又不會引起換行。
/* 整個下拉菜單 */
.dropdown {
display: inline-block;
此時滑鼠隻有在下拉菜單上方，才會觸發菜單區域展開。
3. 小結
下拉菜單已經做出來了，其實還不夠完善，要做一個完美的網頁控件，可能需要大量的工作，尚需努力！
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)