那么我們說了，這個(gè)要做一個(gè)二級(jí)菜單的，現(xiàn)在剛有了第一級(jí)的菜單，現(xiàn)在來寫第二級(jí)。

二級(jí)菜單是什么呢？其實(shí)還是一個(gè)列表，有那么幾個(gè)列表項(xiàng)。所以還是 ul 和 li 標(biāo)簽而已。那么放在哪里呢？這個(gè)問題很有意思，真正的解答是：放在哪里都可以。我來解說幾種情況：

第一種：像我們這個(gè)實(shí)例這么簡單的情況。一般的我們?yōu)榱苏f明他的層級(jí)關(guān)系，都會(huì)把它放在父級(jí)導(dǎo)航項(xiàng)內(nèi)；

第二種：二級(jí)甚至三級(jí)或者更多級(jí)導(dǎo)航很復(fù)雜，代碼量很大。這時(shí)候我們一般把它放在頁尾。因?yàn)?，一般這些導(dǎo)航默認(rèn)是不顯示的，那么讓不顯示的代碼在前面，打開頁面的時(shí)候就會(huì)先載入這部分代碼，然后再載入下面那些需要被顯示的代碼，就顯得頁面加載速度比較慢了。所以我們把這些不需要立刻顯示出來的代碼放在最后去加載。至于位置，當(dāng)然用各種方式定位過去就是了，有的時(shí)候也可能用 JS 動(dòng)態(tài)的把這部分代碼再插到前面。

好啦，開始我們本次的簡單任務(wù)，那么加上二級(jí)導(dǎo)航之后就變成了這個(gè)樣子。

<ul>
    <li>首頁</li>
    <li>分類 &#9660;
        <ul>
            <li>小分類一</li>
            <li>小分類二</li>
            <li>小分類三</li>
            <li>小分類四</li>
        </ul>
    </li>
    <li>關(guān)于</li>
    <li>聯(lián)系</li>
    <li>福利</li>
</ul>
<div class="clear"></div>

然后我們來給二級(jí)導(dǎo)航寫 CSS ：

#nav>ul>li>ul {
    margin: 0;
    padding: 0;
    background:#363636;
    position: absolute;
    top: 40px;
}

我們一段段的說，這里定義的是 #nav （導(dǎo)航）里的 ul （一級(jí)菜單）里的 li （一級(jí)菜單項(xiàng)）里面的 ul （二級(jí)菜單）。好了，選擇器就說到這里，下次不說了，說了兩遍，差不多該看懂了。

margin 和 padding 都是清除元素的原有樣式，這事情我們也做過很多次了，background 是設(shè)置背景色。

position 是定位，absolute 定位什么特點(diǎn)？不給自己保留原來的位置，而且相對(duì)于他外面第一個(gè)不是默認(rèn)定位方式的元素定位。然而他外面并沒有……這時(shí)候定位變得復(fù)雜。所以我們要讓它相對(duì)于它外面的那個(gè) li 標(biāo)簽進(jìn)行定位。那么我們要給前面的 li 標(biāo)簽設(shè)置一個(gè)定位 position: relative; ，但是并不設(shè)置定位的位置數(shù)值。這樣 li 位置沒有發(fā)生變化，而且也占據(jù)著原來的位置。但是它內(nèi)部的 ul 就可以以它為基準(zhǔn)進(jìn)行定位了。

top 是說二級(jí)菜單相對(duì)于他外面的 li 標(biāo)簽，頂部的距離是 40px ，正好給一級(jí)菜單留出了位置。

然后我們定義一下二級(jí)菜單的菜單項(xiàng)就可以去看效果了：

#nav ul>li>ul>li {
    width: 80px;
    margin: 0;
    padding: 0 35px;
    list-style: none;
    float: left;
    color: #FCFCFC;
    line-height: 36px;
    border-bottom: 1px solid #666;
}

這部分不解釋了，因?yàn)椴⒉粡?fù)雜。

然后我們就獲得了如下效果的導(dǎo)航菜單：

那么趁著還不復(fù)雜，趕緊的思考一下這個(gè)定位是怎么實(shí)現(xiàn)的，把你不懂得地方都去試著修改或者刪除一下，看看會(huì)發(fā)生什么樣的變化。

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： 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