看到網上各個網站有各色各樣的下拉列表框，你是否有想過自己去做一個出來呢？出於好奇與自強心，我研究了一個下午，發現網上很多的下拉列表框都是利用javascript或者是jquery（其實jquery和javascript本質是一樣的）動態的畫出來的，而頁面本身其實不存在這個列表框的元素。但是經過大量的查詢，最后還是基本可以做出一個利用純的css編寫出一個下拉列表框，在這里報着和博客園的朋友分享的態度，寫了這篇文章。如果有什么不對，請指正。
首先我們在body中創建一個我們的菜單和子菜單。利用的元素為ul 和 li。
代碼如下：
1 <ul id="menu">
2 <li><a href="#">菜單一</a>
3 <ul>
4 <li><a href="#">子菜單一</a></li>
5 <li><a href="#">子菜單二</a></li>
6 <li><a href="#">子菜單三</a></li>
7 <li><a href="#">子菜單四</a></li>
8 <li><a href="#">子菜單五</a></li>
9 </ul>
10 </li>
11 <li><a href="#">菜單二</a>
12 <ul>
13 <li><a href="#">子菜單一</a></li>
14 <li><a href="#">子菜單二</a></li>
15 <li><a href="#">子菜單三</a></li>
16 <li><a href="#">子菜單四</a></li>
17 <li><a href="#">子菜單五</a></li>
18 </ul>
19 </li>
20 <li><a href="#">菜單三</a>
21 <ul>
22 <li><a href="#">子菜單一</a></li>
23 <li><a href="#">子菜單二</a></li>
24 <li><a href="#">子菜單三</a></li>
25 <li><a href="#">子菜單四</a></li>
26 <li><a href="#">子菜單五</a></li>
27 </ul>
28 </li>
29 <li><a href="#">菜單四</a>
30 <ul>
31 <li><a href="#">子菜單一</a></li>
32 <li><a href="#">子菜單二</a></li>
33 <li><a href="#">子菜單三</a></li>
34 <li><a href="#">子菜單四</a></li>
35 <li><a href="#">子菜單五</a></li>
36 </ul>
37 </li>
38 <li><a href="#">菜單五</a>
39 <ul>
40 <li><a href="#">子菜單一</a></li>
41 <li><a href="#">子菜單二</a></li>
42 <li><a href="#">子菜單三</a></li>
43 <li><a href="#">子菜單四</a></li>
44 <li><a href="#">子菜單五</a></li>
45 </ul>
46 </li>
47 </ul>
部分效果圖如下：
這個是我們的粗粗的下拉列表框，你可能會說，這個和我們的平時見到的下拉列表框不太一樣呀，而且li元素前面那些點。請看我慢慢把它裝飾成完美的“作品”……
接着我們按照習慣，創建一個兩個css樣式表，一個叫main.css 另一個叫menu.css，然后都放在同一個styles的文件夾下：如圖：
這樣做的目的是為了方便我們吧css代碼模塊化，為以后的維護做好良好的基礎。接着我們要吧這兩個css文件盒.html文件連起來了。首先在head目錄下創建一個<link>標簽把需要的main.css文件找到。
代碼如下：
<link rel="stylesheet" href="styles/main.css" type="text/css" />
接着在main.css文件中加入一個引向menu.css的文件就可以了。需要添加的代碼如下：
@import url('menu.css');
大概的拓撲圖如上。
好了現在index.html文件和main.css文件都寫好了，只需要寫menu文件下的內容就可以了。
首先我們創建一塊寬度為800px的矩形，然后讓這個矩形居中。
代碼如下：
1 *{
2 margin:0px;
3 padding:0px;
4 word-wrap:break-word;
5 word-break:break-all;
6 }
7
8 html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始終顯示滾動條*/
9
10 #menu{
11 margin:0px auto;
12 width:800px;
13 }/*是整個menu頁面處於中間的水平*/
接着我們寫核心的css腳本代碼了，首先讓menu菜單緊靠邊框，然后設置菜單欄的長度和寬度，並向左飄並設置字體的大小，並設置顯示方式為線性的。
其中display：inline在w3shool解釋為：默認。此元素會被顯示為內聯元素，元素前后沒有換行符。代碼如下：
1 ul{
2 margin:0px;
3 padding:0px;
4 }
5
6 /*使菜單緊密的排成一條線並去除li前面的點*/
7 ul li{
8 float:left;
9 display:inline;
10 font:1em Arial, Helvetica, sans-serif;
11 height:30px;
12 width:100px;
13 list-style:none;
14 }
接着我們設置菜單的內容，設置字體的內容為白色，然后去掉超鏈接的下划線，設置行高，並設置長度和寬度等等代碼如下：
1 ul li a{
2 color:#fff;
3 text-decoration:none;
4 line-height:29px;
5 width:91px;
6 height:29px;
7 margin:0px;
8 padding:0px 0px 0px 8px;
9 display:block;
10 border-right:1px solid #ccc;
11 border-bottom:1px solid #ccc;
12 background:#83cf33;
13 }
菜單外框寫好了，接着我們寫子菜單的外框了。設置子菜單的外框的高度和寬度：
代碼如下：
1 ul li ul li{
2 height:25px;
3 width:100px;
4 }
設置子菜單中超鏈接的文字的背景和行高。
代碼如下：
1 ul li ul li a{
2 background:#b2da7e;
3 line-height:24px; /*設置行間的距離*/
4 }
5
寫到這里基本框架做出來額，看效果圖：
接着我們的任務就是吧這些菜單寫動起來。利用的hover這個偽元素。當我們鼠標在菜單框中時，我們希望設置一下這個菜單項高亮顯示，那就把顏色改得鮮明點，代碼如下：
1 ul li a:hover{
2 background:#94ea10;
3 }
同理我們寫一下子菜單的高亮顯示的代碼：
1 ul li ul li a:hover{
2 background:#a5d561;
3 }
接着我們要開始讓他動起來的真正代碼了，思路是這樣的，我們把子菜單隱藏起來，然后設置當我們的鼠標在菜單上面的時候，我們吧隱藏起來的內容顯示出來。這里還是利用了hover這個偽元素的特點。代碼如下：
1 ul li ul{
2 visibility:hidden;
3 }
4
5 /*當鼠標在菜單上得時候顯示子菜單*/
6 ul li:hover ul{
7 visibility:visible;
8 }
好了我們的純的css下拉列表框，寫好了。你可能說為什么不用javascript來寫呢，其實利用javascript寫也沒有問題，但是稍微懂點seo的技術人員知道，在javascript中創建的任何元素，這些搜索引擎都是爬不到的；當然我們從另一個角度可以說，既然知道了一種方法，為什么不去在找一種方法呢？本人親測IE8、IE9、火狐6.0.2、谷歌瀏覽器17.0.963.56 m完全兼容。
讀到這里你是否可以自己做出一個用純的css腳本寫出一個下拉列表框呢？
最好附上menu.css文件的完整的代碼和效果圖：
View Code
1 *{
2 margin:0px;
3 padding:0px;
4 word-wrap:break-word;
5 word-break:break-all;
6 }
7
8 html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始終顯示滾動條*/
9
10 #menu{
11 margin:0px auto;
12 width:800px;
13 }/*是整個menu頁面處於中間的水平*/
14
15 /*============================================================*/
16 /*下面是核心的代碼*/
17 /*使菜單欄靠進左邊*/
18 ul{
19 margin:0px;
20 padding:0px;
21 }
22
23 /*使菜單緊密的排成一條線並去除li前面的點*/
24 ul li{
25 float:left;
26 display:inline;
27 font:1em Arial, Helvetica, sans-serif;
28 height:30px;
29 width:100px;
30 list-style:none;
31 }
32
33 /*去除超鏈接的下划線 塊狀的形式存在*/
34 ul li a{
35 color:#fff;
36 text-decoration:none;
37 line-height:29px;
38 width:91px;
39 height:29px;
40 margin:0px;
41 padding:0px 0px 0px 8px;
42 display:block;
43 border-right:1px solid #ccc;
44 border-bottom:1px solid #ccc;
45 background:#83cf33;
46 }
47
48 /*設置子菜單的長寬*/
49 ul li ul li{
50 height:25px;
51 width:100px;
52 }
53
54 /*設置子菜單下超鏈接的背景色*/
55 ul li ul li a{
56 background:#b2da7e;
57 line-height:24px; /*設置行間的距離*/
58 }
59
60 /*設置超鏈接的背景色*/
61 ul li a:hover{
62 background:#94ea10;
63 }
64
65 /*吧子菜單隱藏起來*/
66 ul li ul{
67 visibility:hidden;
68 }
69
70 /*當鼠標在菜單上得時候顯示子菜單*/
71 ul li:hover ul{
72 visibility:visible;
73 }
74
75 /*顯示子菜單的超鏈接*/
76 ul li ul li a:hover{
77 background:#a5d561;
78 }
