前言：本題是網易雲課堂的前端微專業《頁面製作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時做出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。
－－－－－－－－－－－－－－－－－－－－－華麗的分割線－－－－－－－－－－－－－－－－－－－－－－－－
0.需求：當滑鼠hover到按鈕上時，出現下拉式功能表導航條。
1.問題拆解：
（1）HTML應該如何組織比較方便合理
因為題中要求下拉式功能表位於按鈕的正下方，可以使用列表<li>中嵌套無序列表<ul>的方式，設定<ul>padding值為0。
（2）如何?下拉式功能表在滑鼠沒有hover到按鈕上時不出現
使用定位隱藏，設定下拉式功能表為絕對位置，設定一個負的很大的值。
（3）如何?下拉式功能表在滑鼠hover時出現
設定滑鼠hover時，<ul>列表的left值。
2.HTML結構
<body> <li class="btn"><a class="btn1" href="#">按鈕</a> <ul> <li><a href="#">下拉式功能表項</a></li> <li><a href="#">下拉式功能表項</a></li> <li><a href="#">下拉式功能表項</a></li> <li><a class="last" href="#">下拉式功能表項</a></li> </ul> </li></body>
（1）首先重設預設的<li>,<a>標籤樣式
li, li a { text-decoration: none; list-style-type: none; font-family: "宋體"; font-size: 12px; color: #000; }
（2）設定按鈕的邊框等，此時我設定的是外層<li>標籤中<a>標籤的樣式，此時將內層<a>標籤設定成塊級block，這樣可以設定寬高，並且後面有用（後面再說）。
.btn1 { display: block; border: 1px solid #ddd; width: 50px; height: 28px; text-align: center; line-height: 28px; }
(3)將下拉式功能表隱藏設定成不可見
ul { margin-top: 1px; position: absolute; /*設定絕對位置*/ left: -999em; /*設定隱藏*/ padding: 0; /*離它的父元素的邊界為0，所以可以位於父元素<li>的正下方*/ }
(4)為下拉式功能表項添加樣式
ul li a { display: inline-block; /*功能表項目寬度未知，設定inline－block寬度為內容寬度*/ border-top: 1px solid #ddd; border-left: 1px solid #ddd; /*這方法很笨，千萬別學我*/ border-right: 1px solid #ddd; height: 30px; padding: 0 10px; line-height: 30px; }
(5)不能忘了最後一個
.last { border-bottom: 1px solid #ddd; }
(6)設定滑鼠hover時出現下拉式功能表
.btn:hover ul { left: auto; /*預設ul的padding為0，位於按鈕正下方*/ }
(7)設定hover時改變背景顏色
ul li a:hover { background-color: #ddd; }
(8)此時會有一個小bug，滑鼠hover到按鈕整一行時都會出現下拉式功能表，因為此時最外層的<li>標籤是區塊層級元素，區塊層級元素沒有設定寬度預設的寬度是父元素寬度，而它的父元素是body，第（6）步寫的是hover整個外層<li>標籤，所以會出現這種情況。
解決辦法： 可以在父元素<li>設定inline－block，子項目設定block，當子項目內容超出時，父元素寬度根據內容變化，所以，可以將按鈕hover地區控制按鈕邊框之內。
.btn{ display: inline-block; /*設定btn是inline－block， 預設寬度為內容寬度，則滑鼠只會在hover到按鈕地區時才會展開下拉式功能表*/ }
以上是我的一些想法以及實現，如有錯誤之處，歡迎各位前端大神留言評論拍磚。如果你有好的想法也可以和我交流，My Code寫的有很多不足之處，希望多和各位交流提高，謝謝。。。
如有需要可加我QQ：965093975
以下是完整代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>純css實現下拉式功能表</title> <style> li, li a { text-decoration: none; list-style-type: none; font-family: "宋體"; font-size: 12px; color: #000; } .btn1 { display: block; border: 1px solid #ddd; width: 50px; height: 28px; text-align: center; line-height: 28px; } ul { margin-top: 1px; position: absolute; /*設定絕對位置，寬度為內容寬度*/ left: -999em; /*設定隱藏*/ padding: 0; /*離它的父元素的邊界為0，所以可以位於父元素li的正下方*/ } ul li a { display: inline-block; /*功能表項目寬度未知，設定inline－block寬度為內容寬度*/ border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; height: 30px; padding: 0 10px; line-height: 30px; } .last { border-bottom: 1px solid #ddd; } .btn:hover ul { left: auto; /*預設ul的padding為0，位於按鈕正下方*/ } ul li a:hover { background-color: #ddd; } .btn{ display: inline-block; /*設定btn是inline－block， 預設寬度為內容寬度，則滑鼠只會在hover到按鈕地區時才會展開下拉式功能表*/ } </style></head><body> <li class="btn"><a class="btn1" href="#">按鈕</a> <ul> <li><a href="#">下拉式功能表項</a></li> <li><a href="#">下拉式功能表項</a></li> <li><a href="#">下拉式功能表項</a></li> <li><a class="last" href="#">下拉式功能表項</a></li> </ul> </li></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
