然后就是給這個(gè)按鈕加裝一個(gè)菜單用來(lái)彈出。這很像我們前邊寫(xiě)二級(jí)菜單的操作，其實(shí)也沒(méi)什么本質(zhì)上的區(qū)別，管他幾級(jí)呢，反正都是彈出菜單罷了。

所以也不過(guò)是加一個(gè)列表而已，懶惰如我，直接把上邊的二級(jí)菜單復(fù)制過(guò)來(lái)了。

<div id="show-nav">
    <div class="button">我<br>是<br>菜<br>單</div>
    <ul>
        <li>小分類(lèi)一</li>
        <li>小分類(lèi)二</li>
        <li>小分類(lèi)三</li>
        <li>小分類(lèi)四</li>
    </ul>
</div>

這并不復(fù)雜，那么他的 CSS 跟上邊二級(jí)導(dǎo)航的也差不多：

#show-nav ul {
    display: none;
    margin: 0;
    padding: 0;
    background:rgba(54,54,54,0.6);
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 50;
}
#show-nav:hover ul {
    display: block;
}
#show-nav ul>li {
    width: 80px;
    margin: 0;
    padding: 0 35px;
    list-style: none;
    float: left;
    color: #FCFCFC;
    line-height: 36px;
    border-bottom: 1px solid #666;
}

除了定位值發(fā)生了一些變化，其他幾乎沒(méi)有改變，所以就不多說(shuō)了。只說(shuō)一個(gè)小區(qū)別：

background:rgba(54,54,54,0.6);，一般我們用的如 #FFFFFF 形式的顏色值，是 RGB 顏色值，第一二位表示紅色的濃度，三四位是綠色，五六位是藍(lán)色。現(xiàn)在我們換了一個(gè) rgba 格式，其實(shí)就是多了一個(gè)透明度的數(shù)值，當(dāng)然其他區(qū)別也是有的，#FFFFFF 用的是十六進(jìn)制，而我們現(xiàn)在寫(xiě)的 rgba 后面用的是十進(jìn)制，前三個(gè)數(shù)值分別表示紅綠藍(lán)三種顏色的濃度，數(shù)值為 0——255 之間的整數(shù)。而最后一位是透明度，可以是 0 到 1 之間的小數(shù)。這個(gè)辦法就可以簡(jiǎn)單的設(shè)置一個(gè)透明背景。

然后注意這次設(shè)置的 z-index:50; 而上節(jié)課我們給 #show-nav .button 設(shè)置的是 99。他們數(shù)字的值并不重要，重要的是他們之間的大小關(guān)系。這樣是為了讓彈出的菜單顯示在按鈕后面，也就是按鈕遮住彈出菜單的左下角，顯得更美觀一些。

然后來(lái)看看效果：

這幾節(jié)課的案例都是很常見(jiàn)的一些情境，定位的用法也并不復(fù)雜，稍微認(rèn)真思考一下都可以理解，然而重要的不是技術(shù)本身，而是利用技術(shù)的思路。嗯哼，多思考哦~

本章代碼下載：本章代碼

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書(shū)將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me