菜單欄.jpg

前文導(dǎo)航欄全解析中我們做了水平和垂直的導(dǎo)航欄，現(xiàn)在我們做一下水平和垂直的菜單欄。菜單欄與導(dǎo)航欄區(qū)別不大，只要在導(dǎo)航欄的條目上加上菜單即可。
我們先上垂直導(dǎo)航欄的代碼，在上面加菜單。不會(huì)做垂直導(dǎo)航欄，點(diǎn)這里。

HTML

 <ul>
        <li>精選</li>
        <li>女裝</li>
        <li>鞋包</li>
        <li>男士</li>
        <li>運(yùn)動(dòng)</li>
        <li>飾品</li>
        <li>美妝</li>
        <li>母嬰</li>
        <li>居家</li>
        <li>國(guó)際</li>
        <li>生活</li>
        <li>預(yù)告</li>
 </ul>

CSS

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }

效果如下圖：

我們?cè)凇揪贰恐屑由先齻€(gè)菜單

        <li>精選
            <ul class="menu">
                <li>精選男裝</li>
                <li>精選女裝</li>
                <li>精選童裝</li>
            </ul>
        </li>

效果如下：

新加的菜單把原來(lái)的導(dǎo)航欄撐開，我們?cè)诓藛紊霞由辖^對(duì)定位。

.menu {
    position: absolute;
}

為了使菜單參照導(dǎo)航欄的條目定位，我們?cè)趯?dǎo)航欄的li上加上相對(duì)定位。

 position : relative;

效果如下：

 width: 90px;

看上去寬度差不多吧，位置菜單有些問題，默認(rèn)菜單在li的左下角，我們要把它移動(dòng)到右上角。需要距離top 0；距離left 100%。

 top: 0;
 left: 100%;

導(dǎo)航欄的線在菜單中顯示，我們給菜單加上個(gè)白色背景色。

background: #fff;

樣子差不多了。但是鼠標(biāo)放到菜單上，菜單上的字沒了。

原因是我們?cè)?code>li:hover上把字體顏色設(shè)置成了白色。我們只要給.menu加個(gè)顏色，就可以解決這個(gè)問題。

  color: #000;

這里的字體變粗也是導(dǎo)航欄li:hover既存特效?？梢圆桓淖儯绻敫淖?，加個(gè)font-weight:normal即可。

菜單基本上成型，最后我們只需要加上顯示控制即可。默認(rèn)菜單隱藏。

  display: none;

鼠標(biāo)放到導(dǎo)航欄的li上顯示。

li:hover .menu {
            display: inline-block;
}

OK，我們的垂直菜單欄好了。

如果想給【女裝】加上菜單怎么做呢？

這個(gè)更簡(jiǎn)單，只要給【女裝】的li嵌套一個(gè)無(wú)序列表即可。

        <li>女裝
            <ul class="menu">
                <li>春季女裝</li>
                <li>夏季女裝</li>
                <li>秋季女裝</li>
                <li>冬季女裝</li>
            </ul>
        </li>

代碼總結(jié)
HTML

<ul>
        <li>精選
            <ul class="menu">
                <li>精選男裝</li>
                <li>精選女裝</li>
                <li>精選童裝</li>
            </ul>
        </li>
        <li>女裝
            <ul class="menu">
                <li>春季女裝</li>
                <li>夏季女裝</li>
                <li>秋季女裝</li>
                <li>冬季女裝</li>
            </ul>
        </li>
        <li>鞋包</li>
        <li>男士</li>
        <li>運(yùn)動(dòng)</li>
        <li>飾品</li>
        <li>美妝</li>
        <li>母嬰</li>
        <li>居家</li>
        <li>國(guó)際</li>
        <li>生活</li>
        <li>預(yù)告</li>
    </ul>

CSS

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
            position: relative;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }
        
        .menu {
            position: absolute;
            width: 90px;
            top: 0;
            left: 100%;
            background: #fff;
            color: #000;
            display: none;
        }
        
        li:hover .menu {
            display: inline-block;
        }

如果我們要做成水平菜單欄，怎么做了？
修改li的display把垂直導(dǎo)航欄改成水平導(dǎo)航欄

    display: inline-block;

導(dǎo)航欄變成水平的了，但是菜單顯示在右上角，有些合適了。改到左下角顯示比較好。

  left: 0;
  top: 100%;

兩步完成了“華麗轉(zhuǎn)身”，帥吧。

童鞋們多加練習(xí)體會(huì)當(dāng)中的每一步，實(shí)際使用中可能不需要一些步驟（如設(shè)置字體或者背景顏色）。但是，基本流程很清晰的。大家試一下吧。

如有問題請(qǐng)留言，如有幫助請(qǐng)點(diǎn)贊。