純CSS實現下拉菜單導航

時間 2019-11-08

原文原文鏈接

前言：本題是網易雲課堂的前端微專業《頁面製做》課程的做業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時作出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。css

1.需求：當鼠標hover到按鈕上時，出現下拉菜單導航條。html

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>

3.設置樣式spa

（1）首先重置默認的<li>,<a>標籤樣式code

li,
li a {
    text-decoration: none;
    list-style-type: none;
    font-family: "宋體";
    font-size: 12px;
    color: #000;
}

（2）設置按鈕的邊框等，此時我設置的是外層<li>標籤中<a>標籤的樣式，此時將內層<a>標籤設置成塊級block，這樣能夠設置寬高，而且後面有用（後面再說）。htm

.btn1 {
        display: block;
        border: 1px solid #ddd;
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 28px;
    }

（3）將下拉菜單隱藏設置成不可見blog

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）不能忘了最後一個utf-8

.last {
    border-bottom: 1px solid #ddd;
}

（6）設置鼠標hover時出現下拉菜單it

.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到按鈕區域時纔會展開下拉菜單*/
    }

以上是個人一些想法以及實現，若有錯誤之處，歡迎各位前端大神留言評論拍磚。若是你有更好的作法也能夠和我交流，個人代碼寫的有不少不足之處，但願多和各位交流提升，謝謝！！！

如下是完整代碼：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。