• 我們先看一下最終效果。

圖1

一、開始吧，我們先做一個盒子drop，它以後要裝的是按鈕和下拉列表。

圖2

二、在盒子drop裡面做一個按鈕dropbt。

圖3

圖4

三、按鈕有點醜了，于是我們給按鈕加點樣式。

圖5

圖6

四、下面我們做出下拉列表，它們是一串鍊接，我們用一個盒子dropbox裝着。

圖7

圖8

五、列表是橫着的，而且不怎麼好看，我們先改超鍊接a的樣式。

圖9

圖10

六、菜單列表好看許多了，我們給列表盒子dropbox加點樣式，比如陰影。

圖11

圖12

七、再好看的菜單列表一開始也是要先隐藏的。

圖13

圖14

八、我們讓鼠标移到按鈕上時，按鈕顔色變淺。

圖15

圖16

九、現在可以設置點擊後，下拉菜單出現了。

圖17

圖18

十、下拉菜單出現了，但你會發現鼠标在右側時，菜單也會彈出來，我們改一下樣式，解決這個問題，再次移過去的時候，你會發現隻有在按鈕位置才會彈出菜單了。

圖19

十一、完善一下，當鼠标移動菜單列表時，背景色改變。

圖20

圖21

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dropbt{ padding: 10px; /* 按鈕内邊框離 */ font-size: 16px; /* 按鈕字體大小 */ background: #369; /* 按鈕背景色 */ border: none; /* 去掉按鈕邊框 */ color: white; /* 按鈕字的顔色 */ cursor: pointer; /* 鼠标在按鈕上的小手标記 */ } .dropbox a { color: black; /* 鍊接字的顔色改成黑色 */ padding: 10px; /* 鍊接内邊距 */ text-decoration: none; /* 去掉可惡的下劃線 */ display: block; /* 鍊接獨立成行 */ } .dropbox{ display: none; /* 不顯示 */ position: absolute; /* 盒子的位置為相對定位 */ background-color: #f9f9f9; /* 盒子的背景色 */ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); /* 盒子的陰影，這裡設置了右邊4下邊8 */ } .drop:hover .dropbt{ background: #2f84d8; /* 鼠标在按鈕上時，按鈕背景色變 */ } .drop:hover .dropbox{ display: block; /* 鼠标在drop上時，dropbox菜單出現 */ } .drop{ display: inline-block; /* 這是讓盒子drop不占整行，去掉盒子天生占行的屬性 */ } .dropbox a:hover{ background: #cccdcf; /* 這裡是鼠标移動菜單列表時改變背景色 */ } </style> </head> <body> <div class="drop"> <button class="dropbt">點我下拉菜單</button> <div class="dropbox"> <a href="#">是下拉菜單一</a> <a href="#">是下拉菜單二</a> <a href="#">是下拉菜單三</a> </div> </div> </body> </html>