摘要：為了讓包圍列表項(xiàng)，沒(méi)有使用，而是使用了，是因?yàn)榍罢邥?huì)導(dǎo)致后來(lái)添加到下拉菜單中的子菜單無(wú)法顯示它們最終會(huì)顯示在父元素的外面，結(jié)果會(huì)導(dǎo)致溢出而被隱藏。它與父元素之間的間隙，實(shí)際上下拉菜單中第一個(gè)鏈接的邊框。

  
菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來(lái)分組鏈接不僅符合邏輯，而且即使沒(méi)有額外的 CSS 也能適當(dāng)顯示鏈接的層次。默認(rèn)情況下，由于列表（li）是塊級(jí)元素，因此它們會(huì)上下堆疊。

html 標(biāo)記：

css 規(guī)則：

*{
    margin: 0;
    padding: 0;
}
nav{
    margin: 50px;width:150px;
}
.list ul{
    border: 1px solid #6a6b6c;
    border-radius: 3px;
    padding:5px 10px 3px;
}
.list li{
    list-style: none;
    /*padding: 3px 10px;*/
}
.list li + li a{       /* 注意這里！ */
    border-top: 1px solid #6a6b6c;
}
.list a{
    display: block;    /* 這里！ */
    padding:3px 10px;    /* 還有這里！ */
    text-decoration: none;
    padding: 3px 10px;
}
.list a:hover{
    color:#069;
}

效果圖：

說(shuō)明：

相對(duì)于 div，使用 HTML5 新增的 nav 元素作為導(dǎo)航菜單的容器在語(yǔ)義上更恰當(dāng)。

使用 非首位子元素 選擇符。li + li選擇符意思為：任何跟在 li 之后的 li。在上面表示給除第一個(gè) li 之外的所有列表項(xiàng)上方加一條邊框。這種選擇符就稱為 非首位子元素選擇符。它在選擇列表時(shí)非常使用。其它實(shí)現(xiàn)該效果的方法：

/*給所有 li 上方添加一條邊框*/
li {
    border-top:1px solid #f00;
}
/*去掉第一個(gè) li 上方的邊框*/
li:first-child {
    border-top:none;
}

讓列表可點(diǎn)擊。為了不讓只有文本可以點(diǎn)擊（因?yàn)殒溄?a 是行內(nèi)元素，它會(huì)收縮并包住其中的文本。），為了提高用戶體驗(yàn)，我們需要 讓列表項(xiàng)所在的整行都能點(diǎn)擊。方法就是首先把內(nèi)邊距從 li 元素轉(zhuǎn)移到鏈接內(nèi)部，然后讓鏈接完全填滿整個(gè)列表項(xiàng)。如下所示：

.list a{
    display:block;
    padding:3px 10px;
}

然后就是把選擇符 li + li 變成li + li a，就可以把上邊框添加到列表后面的列表項(xiàng)所包含的鏈接元素上。

html 標(biāo)記：

CSS 規(guī)則：

.list ul{
    overflow: hidden;   /*強(qiáng)制 ul 包圍浮動(dòng)的 li 元素*/
}
.list li{
    float: left;    /*讓 li 元素水平排列*/
    list-style: none;
}
.list a{
    display: block;    /*讓鏈接變成塊級(jí)元素*/
    padding: 0 16px;
    text-decoration: none;
    color:#999;
}
.list li + li a{
    border-left:1px solid #aaa;
}
.list a:hover{
    color:#555;
}

效果圖：

說(shuō)明：

浮動(dòng)可以讓 li 元素從垂直變成水平。

display:block 讓鏈接從收縮變成擴(kuò)張，從而整個(gè) li 元素都變成了可點(diǎn)擊。

選擇符 li + li a 為除第一個(gè)鏈接之外的每個(gè)鏈接左側(cè)都加了一條豎線，作為視覺(jué)分割線。

相對(duì)于前面兩種菜單，這個(gè)實(shí)現(xiàn)起來(lái)有點(diǎn)復(fù)雜。

下面，我們分幾個(gè)步驟來(lái)實(shí)現(xiàn)。

HTMl 標(biāo)記：

CSS 規(guī)則：

/* ***************添加視覺(jué)樣式************ */
.multi_drop_menu {
    font: 1em helvetica, arial, sans-serif;
}

.multi_drop_menu a{
    /*讓鏈接充滿列表項(xiàng)*/
    display: block;

    /*文本顏色*/
    color:#555;

    /*背景顏色*/
    background-color:#eee;

    /*鏈接的內(nèi)邊距*/
    padding: .2em 1em;

    /*分隔線寬度*/
    border-width:3px;

    /*可以有顏色，也可以透明*/
    border-color: transparent;
}

/*顯示選擇路徑*/
.multi_drop_menu li:hover > a{ /*注意這里的選擇符，使用了冒泡機(jī)制，后面會(huì)用到*/
    /*懸停時(shí)的文本顏色*/
    color:#fff;

    /*懸停時(shí)的背景顏色*/
    background-color: #aaa;
}

/* ***************添加功能樣式************* */
.multi_drop_menu *{
    margin:0;
    padding:0;
}

/*強(qiáng)制ul包圍li*/
.multi_drop_menu ul{
    float: left;
}
.multi_drop_menu li{
    /*水平排列菜單項(xiàng)*/
    float: left;

    /*去掉默認(rèn)的項(xiàng)目符合*/
    list-style: none;

    /*為子菜單提供定位上下文*/
    position: relative;
}

.multi_drop_menu li a{
    /*讓鏈接填充列表項(xiàng)*/
    display: block;

    /*給每個(gè)鏈接添加一個(gè)右邊框*/
    border-right-style: solid;

    /*背景只出現(xiàn)在內(nèi)邊距區(qū)域后面*/
    background-clip: padding-box;

    /*去掉鏈接的下劃線*/
    text-decoration: none;
}

效果圖：

說(shuō)明：

分離菜單的 視覺(jué)樣式 和 功能樣式。有利于代碼維護(hù)。

  
視覺(jué)樣式：控制字體大小、邊框和文本的顏色。
功能樣式：控制布局和行為。

通過(guò) 浮動(dòng) 將 li 由垂直堆疊變成水平排列。

為了讓 ul 包圍列表項(xiàng)，沒(méi)有使用 overflow:hide，而是使用了 float:left，是因?yàn)榍罢邥?huì)導(dǎo)致后來(lái)添加到下拉菜單中的子菜單無(wú)法顯示——它們最終會(huì)顯示在父元素 ul 的外面，結(jié)果會(huì)導(dǎo)致 溢出（overflow） 而被 隱藏（hide）。

為了提高用戶體驗(yàn)，要讓 熱區(qū)（可點(diǎn)擊區(qū)域） 最大化——所有視覺(jué)樣式（內(nèi)邊距、背景、邊框等）都應(yīng)用給鏈接 a，而不要應(yīng)用給 ul 或 li。

使用 background-clip:padding-box 阻止鏈接的背景延伸到邊框后面。接著， border-color:transparent;讓邊框透明 ，在鏈接之間產(chǎn)生間隙，讓后面的頁(yè)面能夠透過(guò)邊框被看到。這樣一來(lái)，不用外邊距也能分隔鏈接，本質(zhì)上是緊挨在一起，視覺(jué)上卻是分開的。

CSS 規(guī)則：

/*二級(jí)菜單寬度*/
.multi_drop_menu li ul{
    width: 9em;
}
.multi_drop_menu li li a{
    /*去掉繼承的右邊框*/
    border-right-style: none;

    /*添加上邊框*/
    border-top-style: solid;
}

/* 添加的功能樣式 */
.multi_drop_menu li ul {
    /*臨時(shí)顯示二級(jí)下拉菜單*/
    display:block;
    /*相對(duì)于父菜單項(xiàng)定位*/
    position:absolute;
    /*左邊與父菜單項(xiàng)對(duì)齊*/
    left:0;
    /*頂邊與父菜單項(xiàng)底邊對(duì)齊*/
    top:100%;
}
.multi_drop_menu li li {
    /*停止浮動(dòng)，恢復(fù)堆疊*/
    float:none;
}
.multi_drop_menu li li ul {
    /*繼續(xù)隱藏三級(jí)下拉菜單*/
    display:none;
}

效果圖：

說(shuō)明：

通過(guò)將二級(jí)菜單的頂邊位置（top）設(shè)定為 100%(相對(duì)于其相對(duì)定位的父元素 li)，其頂邊會(huì)與父元素底邊恰好對(duì)齊。它與父元素之間的間隙，實(shí)際上下拉菜單中第一個(gè)鏈接的邊框。

CSS 規(guī)則：

.multi_drop_menu li ul {
    /*隱藏二級(jí)下拉菜單*/
    display:none;
    /*相對(duì)于父菜單項(xiàng)定位*/
    position:absolute;
    /*左邊與父菜單項(xiàng)對(duì)齊*/
    left:0;
    /*頂邊與父菜單項(xiàng)底邊對(duì)齊*/
    top:100%;
}
.multi_drop_menu li:hover > ul {
    /*父元素懸停時(shí)顯示*/
    display:block;
}
/*隱藏二級(jí)菜單*/
li ul {
    display:none;
}
/*顯示二級(jí)菜單*/
li:hover > ul {
    display:block;
}

說(shuō)明：

先把下一級(jí)的菜單隱藏，再在父元素鼠標(biāo)懸停時(shí)把它顯示出來(lái)。

:hover 觸發(fā)器是設(shè)定在 li 元素而非鏈接身上。因?yàn)槲覀兿胍@示的是 li 的子元素 ul。

懸停列表項(xiàng)與子列表之間還有一個(gè)子選擇符 >，如果沒(méi)有這個(gè)選擇符，當(dāng)頂級(jí)菜單項(xiàng)處于懸停狀態(tài)時(shí)，會(huì)同時(shí)顯示二級(jí)和三級(jí)菜單。

CSS 規(guī)則：

.multi_drop_menu li li ul {
    /*相對(duì)于父菜單定位*/
    position:absolute;
    /*與父菜單右側(cè)對(duì)齊*/
    left:100%;
    /*與父菜單項(xiàng)頂邊對(duì)齊*/
    top:0;
}

效果圖：

說(shuō)明：

由于三級(jí)菜單跟二級(jí)菜單一樣垂直堆疊，因而會(huì)被二級(jí)菜單遮住，所以我們需要把三級(jí)菜單放到二級(jí)菜單右側(cè)，讓它的頂邊與鼠標(biāo)所在的菜單項(xiàng)的底邊對(duì)齊。

CSS 規(guī)則：

.multi_drop_menu li:hover > a {
 /*懸停時(shí)的文本顏色*/
 color:#fff;
 /*懸停時(shí)的背景顏色*/
 background-color:#aaa
}

效果圖：

HTML 標(biāo)記：

CSS 規(guī)則：

/*頂級(jí)垂直菜單寬度*/
.multi_drop_menu.vertical {
    width:8em;
}
.multi_drop_menu.vertical li a {
    border-right-style:none;

    border-top-style:solid;
}
.multi_drop_menu.vertical li li a {
    border-left-style:solid;
}
.multi_drop_menu.vertical ul,.multi_drop_menu.vertical li {
     /*讓頂級(jí)菜單垂直顯示*/
     float:none;
}
.multi_drop_menu.vertical li ul {
     /*子菜單左邊與上一級(jí)菜單右邊對(duì)齊*/
     left:100%;

     /*子菜單頂邊與上一級(jí)菜單項(xiàng)頂邊對(duì)齊*/
     top:0;
}

效果圖：

源碼下載

點(diǎn)擊這里

參考資料

CSS設(shè)計(jì)指南