css 二級菜單制作方法-tft每日頭條

我們先看一下最終效果。

css 二級菜單制作方法（純用CSS做的下拉菜單）1

圖1

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

css 二級菜單制作方法（純用CSS做的下拉菜單）2

圖2

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

css 二級菜單制作方法（純用CSS做的下拉菜單）3

圖3

css 二級菜單制作方法（純用CSS做的下拉菜單）4

圖4

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

css 二級菜單制作方法（純用CSS做的下拉菜單）5

圖5

css 二級菜單制作方法（純用CSS做的下拉菜單）6

圖6

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

css 二級菜單制作方法（純用CSS做的下拉菜單）7

圖7

css 二級菜單制作方法（純用CSS做的下拉菜單）8

圖8

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

css 二級菜單制作方法（純用CSS做的下拉菜單）9

圖9

css 二級菜單制作方法（純用CSS做的下拉菜單）10

圖10

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

css 二級菜單制作方法（純用CSS做的下拉菜單）11

圖11

css 二級菜單制作方法（純用CSS做的下拉菜單）12

圖12

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

css 二級菜單制作方法（純用CSS做的下拉菜單）13

圖13

css 二級菜單制作方法（純用CSS做的下拉菜單）14

圖14

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

css 二級菜單制作方法（純用CSS做的下拉菜單）15

圖15

css 二級菜單制作方法（純用CSS做的下拉菜單）16

圖16

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

css 二級菜單制作方法（純用CSS做的下拉菜單）17

圖17

css 二級菜單制作方法（純用CSS做的下拉菜單）18

圖18

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

css 二級菜單制作方法（純用CSS做的下拉菜單）19

圖19

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

css 二級菜單制作方法（純用CSS做的下拉菜單）20

圖20

css 二級菜單制作方法（純用CSS做的下拉菜單）21

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