純CSS的導航下拉菜單

寫在案例前：
本案例並非原創，百度一搜“css下拉菜單”一定能看見一模一樣的案例，而且不止一個，所以就仿照這個案例又自己做了一遍，並且總結一下自己遇到的一些問題結合思考給出的解決辦法，雖然不知道原作者是誰，但是還是要在這裏感謝一下原作者，給了我不止一點思路。廢話不多說，上圖。

 <nav>
        <ul>
            <li><a href="#">導航一</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航二</a></li>
            <li><a href="#">導航三</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a>
                        <ul>
                            <li><a href="#">三級導航</a></li>
                            <li><a href="#">三級導航</a></li>
                            <li><a href="#">三級導航</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航四</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航五</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                </ul> 
            </li>
            <li><a href="#">導航六</a></li>
        </ul>
    </nav>   

nav {
    margin:100px auto;
    text-align:center;
}
nav ul {
    border-radius:10px;
    background:linear-gradient(to bottom,#efefef,#bbbbbb);
    padding:0 20px;
    display:inline-table;
    position:relative;  
    box-shadow:1px 1px 3px #666;
}
nav ul ul {
    display:none;
}
nav ul li {
    float:left; 
}
nav ul::after {
    content:"";
    display:block;
    clear:both;
}
nav ul li a {
    display:block;
    padding:25px 40px;
    color:#000;
    text-decoration:none;
    font-family:"微軟雅黑";
}
nav ul li:hover > ul {
    display:block;
}
nav ul li:hover {
    background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
    color:#FFF;
}
nav ul ul {
    background:#5f6975;
    border-radius:0;
    position:absolute;
    top:100%;
    padding:0;
}
nav ul ul li {
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
}
nav ul ul li a {
    color:#FFF;
}   
nav ul ul li a:hover {
    background:#4b545f;
}
nav ul ul ul {
    width:100%;
    position:absolute;
    left:100%;
    top:50%;
}

---

思路：

1. 做一個下拉菜單，腦海裏第一個閃過的效果就是：鼠標觸及-下拉菜單出現-鼠標移開-下拉菜單隱藏
2. 既然是純css實現。首先需要了解display屬性的特性，使用none、block值來實現下拉菜單的出現和隱藏。
3. 搭配html結構，利用<ul><li></li></ul>對菜單進行分級
4. 熟悉僞類選擇器，:hover不止在文本中使用
5. 利用::after僞元素選擇器來清除浮動
6. 使用position定位來控制下拉菜單的位置
7. 考慮美觀

以上案例用到了一些css3的新特性，如：圓角、背景陰影、背景色漸變、僞元素

• 圓角 border-radius
  當值爲四個數值時，按順序分別表示左上角、右上角、右下角、左下角。
  當值爲兩個數值時，前者表示左上角、右下角；後者表示右上角、左下角；兩者是對立關係。
  當值爲一個數值時，說明元素的四個角都使用這一數值。
  border-radius還可以用來製作半圓，以及四分之一圓

div {
    width:100px;
    height:50px; 
    border-radius:50px 50px 0 0;
    background-color:#F00;
}

• 背景陰影 box-shadow
  語法：box-shadow：【水平陰影】 【垂直陰影】【陰影模糊距離】 【陰影模糊程度】【陰影顏色】【內部陰影】/【外部陰影】
  其中，水平陰影、垂直陰影是必須項，其他爲可選項，陰影位置默認爲外部陰影（outset）。

• 背景顏色漸變
  線性漸變語法 background：linear-gradient（方向，起始顏色，終止顏色）；
  方向也稱角度，線性漸變的角度是以圓心爲起點的發散型角度。例如：想要一個由上往下的紅白漸變 background:linear-gradient(to bottom,red,white);
  關於顏色漸變這一特性其實需要講述的有很多，會單開一篇博文來做詳細講解

• 僞元素
  上一篇博文中提到的利用僞元素選擇器來清除浮動，在這個案例中就運用到了，詳情請翻上一篇。

---

遇到的問題及解決辦法

• display：inline-table不設置寬度時，寬度由內容撐開
  在案例中，並沒有給任何父元素或者子元素添加寬、高，而是使用padding值和內容本身將元素撐開。在未設置display：inline-table的情況下，元素的寬就是整個瀏覽器的寬度，是隨着瀏覽器的大小來改變的。設置後，元素的寬=padding-left+內容+padding-right

• 給元素設置定位時，需要給一個寬度
  當第三級菜單出現時，文字是以單個豎排的方式來顯示(中、英文文本的排列不同)，如下圖：
  

  在上圖的三級導航中，中、英文排序方式完全不同，position屬性的定義中有一點很重要，如果不給添加定位後的元素寬度，那麼此元素會以一個字符的寬度來顯示，從中文文本中可以看出，它就是這麼顯示的，一箇中文字代表一個字符；而英文文本中，一個單詞代表一個字符，注意是一個單詞，不是一個字母。
  所以給此元素添加一個寬度就可以使文本橫向顯示出來。