今天來跟大家介紹純CSS3製作的下拉式選單，不用再用圖片做圓角、漸層，也不用用javascript做淡入淡出效果，一整個很好很強大阿!!不過前提是瀏覽者使用夠新的瀏覽器:)

DEMO範例

觀看範例

語法說明

html部分，一樣使用ul li建立選單結構

<ul id="nav">
　<li>
　　<a href="#">選單1</a>
　　<ul>
　　　<li><a href="#">子項目</a></li>
　　　<li><a href="#">子項目</a></li>
　　　<li><a href="#">子項目</a></li>
　　</ul>
　</li>
　<li>
　<a href="#">選單2</a>
　<ul>
　　<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>
　　　<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>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　</ul>
　　</li>
　　<li><a href="#">子項目</a></li>
　　</ul>
　</li>
</ul>

CSS的部分如下，其實之前的CSS 2就可以做出純css的下拉式選單了，只是效果沒有這麼好，這次使用到的有CSS的CSS3 漸層效果、 CSS3 圓角效果、文字陰影text-shadow、區塊陰影box-shadow、css transform 參數來控制淡入淡出等效果，這些效果並不是每個瀏覽器都完整支援，不過除了IE的問題比較嚴重外，其他的主流瀏覽器，例如Firefox、Google Chrome、Opera、Safari的最新版本都可以正常觀看。

#nav{
margin: 0 auto;
padding: 5px 20px 0;
background: #7D7D7D;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
height:40px;
width:300px;
}

#nav li{
position:relative;
list-style: none;
display:block;
float:left;
margin:0 5px;
padding:0 0 5px;
}

#nav li a{
cursor:pointer;
text-decoration: none;
display: block;
padding: 8px 10px;
font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", Helvetica, Arial, FreeSans, sans-serif;
font-size: 14px;
color: #050505;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background: -o-linear-gradient(
top,
#ffffff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background: -ms-linear-gradient(
top,
#ffffff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));


-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #949494;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}

#nav li a:hover{
color: #005eff;
}

#nav li ul{
position: absolute;
display: block;
margin: 0;
padding: 0;
top: 38px;
left: 0;
background: -moz-linear-gradient(
top,
#ebebeb 0%,
#dbdbdb 50%,
#b5b5b5);
background: -ms-linear-gradient(
top,
#ebebeb 0%,
#dbdbdb 50%,
#b5b5b5);
background: -o-linear-gradient(
top,
#ebebeb 0%,
#dbdbdb 50%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));
border: solid 1px #B4B4B4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
opacity: 0;
}


#nav li:hover>ul{
display:block;
padding:0;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}

#nav li ul li{
margin:0;
padding:0;
}

#nav li ul li a{
color:#666;
text-align:center;
line-height:1.7em;
font-size:12px;
background:none;
border:none;
box-shadow:none;
padding: 2px 20px;
width:50px;
text-shadow: 0 1px 0 white;
}

#nav li ul li a:hover{
color:#fff;
background: -moz-linear-gradient(
top,
#009fe3 0%,
#9ddcf5);
background: -ms-linear-gradient(
top,
#009fe3 0%,
#9ddcf5);
background: -o-linear-gradient(
top,
#009fe3 0%,
#9ddcf5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#009fe3),
to(#9ddcf5));
text-shadow: 0 1px 0 #ccc;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}

#nav li ul li:first-child > a {
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}

#nav li ul li:last-child > a {
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}

#nav ul ul{
position: absolute;
left:100%;
top:0;
}