摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。

  
菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素，因此它們會上下堆疊。

html 標記：

css 規則：

*{
    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;
}

效果圖：

說明：

相對于 div，使用 HTML5 新增的 nav 元素作為導航菜單的容器在語義上更恰當。

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

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

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

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

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

html 標記：

CSS 規則：

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

效果圖：

說明：

浮動可以讓 li 元素從垂直變成水平。

display:block 讓鏈接從收縮變成擴張，從而整個 li 元素都變成了可點擊。

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

相對于前面兩種菜單，這個實現起來有點復雜。

下面，我們分幾個步驟來實現。

HTMl 標記：

CSS 規則：

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

.multi_drop_menu a{
    /*讓鏈接充滿列表項*/
    display: block;

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

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

    /*鏈接的內邊距*/
    padding: .2em 1em;

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

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

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

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

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

/*強制ul包圍li*/
.multi_drop_menu ul{
    float: left;
}
.multi_drop_menu li{
    /*水平排列菜單項*/
    float: left;

    /*去掉默認的項目符合*/
    list-style: none;

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

.multi_drop_menu li a{
    /*讓鏈接填充列表項*/
    display: block;

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

    /*背景只出現在內邊距區域后面*/
    background-clip: padding-box;

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

效果圖：

說明：

分離菜單的 視覺樣式 和 功能樣式。有利于代碼維護。

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

通過 浮動 將 li 由垂直堆疊變成水平排列。

為了讓 ul 包圍列表項，沒有使用 overflow:hide，而是使用了 float:left，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示——它們最終會顯示在父元素 ul 的外面，結果會導致 溢出（overflow） 而被 隱藏（hide）。

為了提高用戶體驗，要讓 熱區（可點擊區域） 最大化——所有視覺樣式（內邊距、背景、邊框等）都應用給鏈接 a，而不要應用給 ul 或 li。

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

CSS 規則：

/*二級菜單寬度*/
.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 {
    /*臨時顯示二級下拉菜單*/
    display:block;
    /*相對于父菜單項定位*/
    position:absolute;
    /*左邊與父菜單項對齊*/
    left:0;
    /*頂邊與父菜單項底邊對齊*/
    top:100%;
}
.multi_drop_menu li li {
    /*停止浮動，恢復堆疊*/
    float:none;
}
.multi_drop_menu li li ul {
    /*繼續隱藏三級下拉菜單*/
    display:none;
}

效果圖：

說明：

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

CSS 規則：

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

說明：

先把下一級的菜單隱藏，再在父元素鼠標懸停時把它顯示出來。

:hover 觸發器是設定在 li 元素而非鏈接身上。因為我們想要顯示的是 li 的子元素 ul。

懸停列表項與子列表之間還有一個子選擇符 >，如果沒有這個選擇符，當頂級菜單項處于懸停狀態時，會同時顯示二級和三級菜單。

CSS 規則：

.multi_drop_menu li li ul {
    /*相對于父菜單定位*/
    position:absolute;
    /*與父菜單右側對齊*/
    left:100%;
    /*與父菜單項頂邊對齊*/
    top:0;
}

效果圖：

說明：

由于三級菜單跟二級菜單一樣垂直堆疊，因而會被二級菜單遮住，所以我們需要把三級菜單放到二級菜單右側，讓它的頂邊與鼠標所在的菜單項的底邊對齊。

CSS 規則：

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

效果圖：

HTML 標記：

CSS 規則：

/*頂級垂直菜單寬度*/
.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 {
     /*讓頂級菜單垂直顯示*/
     float:none;
}
.multi_drop_menu.vertical li ul {
     /*子菜單左邊與上一級菜單右邊對齊*/
     left:100%;

     /*子菜單頂邊與上一級菜單項頂邊對齊*/
     top:0;
}

效果圖：

源碼下載

點擊這里

參考資料

CSS設計指南