純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> 1234567891011121314151617181920212223242526272829303132333435363738394041
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%;
}
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
思路：
做一個下拉選單，腦海裡第一個閃過的效果就是：滑鼠觸及-下拉選單出現-滑鼠移開-下拉選單隱藏
既然是純css實現。首先需要了解display屬性的特性，使用none、block值來實現下拉選單的出現和隱藏。
搭配html結構，利用<ul><li></li></ul>對選單進行分級
熟悉偽類選擇器，:hover不止在文字中使用
利用::after偽元素選擇器來清除浮動
使用position定位來控制下拉選單的位置
考慮美觀
以上案例用到了一些css3的新特性，如：圓角、背景陰影、背景色漸變、偽元素
圓角 border-radius
當值為四個數值時，按順序分別表示左上角、右上角、右下角、左下角。
當值為兩個數值時，前者表示左上角、右下角；後者表示右上角、左下角；兩者是對立關係。
當值為一個數值時，說明元素的四個角都使用這一數值。
border-radius還可以用來製作半圓，以及四分之一圓
div {
width:100px;
height:50px;
border-radius:50px 50px 0 0;
background-color:#F00;
}123456
背景陰影 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屬性的定義中有一點很重要，如果不給新增定位後的元素寬度，那麼此元素會以一個字元的寬度來顯示，從中文文字中可以看出，它就是這麼顯示的，一箇中文字代表一個字元；而英文文字中，一個單詞代表一個字元，注意是一個單詞，不是一個字母。
所以給此元素新增一個寬度就可以使文字橫向顯示出來。