看到網(wǎng)上各個(gè)網(wǎng)站有各色各樣的下拉列表框，你是否有想過(guò)自己去做一個(gè)出來(lái)呢？出于好奇與自強(qiáng)心，我研究了一個(gè)下午，發(fā)現(xiàn)網(wǎng)上很多的下拉列表框都是利用javascript或者是jquery（其實(shí)jquery和javascript本質(zhì)是一樣的）動(dòng)態(tài)的畫(huà)出來(lái)的，而頁(yè)面本身其實(shí)不存在這個(gè)列表框的元素。但是經(jīng)過(guò)大量的查詢，最后還是基本可以做出一個(gè)利用純的css編寫(xiě)出一個(gè)下拉列表框，在這里報(bào)著和博客園的朋友分享的態(tài)度，寫(xiě)了這篇文章。如果有什么不對(duì)，請(qǐng)指正。

　　首先我們?cè)赽ody中創(chuàng)建一個(gè)我們的菜單和子菜單。利用的元素為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>

　　　部分效果圖如下：

　　這個(gè)是我們的粗粗的下拉列表框，你可能會(huì)說(shuō)，這個(gè)和我們的平時(shí)見(jiàn)到的下拉列表框不太一樣呀，而且li元素前面那些點(diǎn)。請(qǐng)看我慢慢把它裝飾成完美的“作品”……

接著我們按照習(xí)慣，創(chuàng)建一個(gè)兩個(gè)css樣式表，一個(gè)叫main.css 另一個(gè)叫menu.css，然后都放在同一個(gè)styles的文件夾下：如圖：

　　這樣做的目的是為了方便我們吧css代碼模塊化，為以后的維護(hù)做好良好的基礎(chǔ)。接著我們要吧這兩個(gè)css文件盒.html文件連起來(lái)了。首先在head目錄下創(chuàng)建一個(gè)<link>標(biāo)簽把需要的main.css文件找到。

　　代碼如下：　　

<link rel="stylesheet" href="styles/main.css" type="text/css" />

　　接著在main.css文件中加入一個(gè)引向menu.css的文件就可以了。需要添加的代碼如下：

@import url('menu.css');

　　大概的拓?fù)鋱D如上。

?

　　好了現(xiàn)在index.html文件和main.css文件都寫(xiě)好了，只需要寫(xiě)menu文件下的內(nèi)容就可以了。

　　首先我們創(chuàng)建一塊寬度為800px的矩形，然后讓這個(gè)矩形居中。

　　代碼如下：　

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下始終顯示滾動(dòng)條*/
9
10 #menu{
11 margin:0px auto;
12 width:800px;
13 }/*是整個(gè)menu頁(yè)面處于中間的水平*/

　　接著我們寫(xiě)核心的css腳本代碼了，首先讓menu菜單緊靠邊框，然后設(shè)置菜單欄的長(zhǎng)度和寬度，并向左飄并設(shè)置字體的大小，并設(shè)置顯示方式為線性的。

其中display：inline在w3shool解釋為：默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。代碼如下：

1 ul{
2 margin:0px;
3 padding:0px;
4 }
5
6 /*使菜單緊密的排成一條線并去除li前面的點(diǎn)*/
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 }

　　接著我們?cè)O(shè)置菜單的內(nèi)容，設(shè)置字體的內(nèi)容為白色，然后去掉超鏈接的下劃線，設(shè)置行高，并設(shè)置長(zhǎng)度和寬度等等代碼如下：

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 }

　　菜單外框?qū)懞昧?#xff0c;接著我們寫(xiě)子菜單的外框了。設(shè)置子菜單的外框的高度和寬度：

　　代碼如下：　　

1 ul li ul li{
2 height:25px;
3 width:100px;
4 }

　　設(shè)置子菜單中超鏈接的文字的背景和行高。

　　代碼如下：

1 ul li ul li a{
2 background:#b2da7e;
3 line-height:24px; /*設(shè)置行間的距離*/
4 }
5

　　寫(xiě)到這里基本框架做出來(lái)額，看效果圖：

　　接著我們的任務(wù)就是吧這些菜單寫(xiě)動(dòng)起來(lái)。利用的hover這個(gè)偽元素。當(dāng)我們鼠標(biāo)在菜單框中時(shí)，我們希望設(shè)置一下這個(gè)菜單項(xiàng)高亮顯示，那就把顏色改得鮮明點(diǎn)，代碼如下：　

1 ul li a:hover{
2 background:#94ea10;
3 }

　　同理我們寫(xiě)一下子菜單的高亮顯示的代碼：

1 ul li ul li a:hover{
2 background:#a5d561;
3 }

　　接著我們要開(kāi)始讓他動(dòng)起來(lái)的真正代碼了，思路是這樣的，我們把子菜單隱藏起來(lái)，然后設(shè)置當(dāng)我們的鼠標(biāo)在菜單上面的時(shí)候，我們吧隱藏起來(lái)的內(nèi)容顯示出來(lái)。這里還是利用了hover這個(gè)偽元素的特點(diǎn)。代碼如下：

1 ul li ul{
2 visibility:hidden;
3 }
4
5 /*當(dāng)鼠標(biāo)在菜單上得時(shí)候顯示子菜單*/
6 ul li:hover ul{
7 visibility:visible;
8 }

　　好了我們的純的css下拉列表框，寫(xiě)好了。你可能說(shuō)為什么不用javascript來(lái)寫(xiě)呢，其實(shí)利用javascript寫(xiě)也沒(méi)有問(wèn)題，但是稍微懂點(diǎn)seo的技術(shù)人員知道，在javascript中創(chuàng)建的任何元素，這些搜索引擎都是爬不到的；當(dāng)然我們從另一個(gè)角度可以說(shuō)，既然知道了一種方法，為什么不去在找一種方法呢？本人親測(cè)IE8、IE9、火狐6.0.2、谷歌瀏覽器17.0.963.56 m完全兼容。

　　讀到這里你是否可以自己做出一個(gè)用純的css腳本寫(xiě)出一個(gè)下拉列表框呢？

　　最好附上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下始終顯示滾動(dòng)條*/
9
10 #menu{
11 margin:0px auto;
12 width:800px;
13 }/*是整個(gè)menu頁(yè)面處于中間的水平*/
14
15 /*============================================================*/
16 /*下面是核心的代碼*/
17 /*使菜單欄靠進(jìn)左邊*/
18 ul{
19 margin:0px;
20 padding:0px;
21 }
22
23 /*使菜單緊密的排成一條線并去除li前面的點(diǎn)*/
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 /*設(shè)置子菜單的長(zhǎng)寬*/
49 ul li ul li{
50 height:25px;
51 width:100px;
52 }
53
54 /*設(shè)置子菜單下超鏈接的背景色*/
55 ul li ul li a{
56 background:#b2da7e;
57 line-height:24px; /*設(shè)置行間的距離*/
58 }
59
60 /*設(shè)置超鏈接的背景色*/
61 ul li a:hover{
62 background:#94ea10;
63 }
64
65 /*吧子菜單隱藏起來(lái)*/
66 ul li ul{
67 visibility:hidden;
68 }
69
70 /*當(dāng)鼠標(biāo)在菜單上得時(shí)候顯示子菜單*/
71 ul li:hover ul{
72 visibility:visible;
73 }
74
75 /*顯示子菜單的超鏈接*/
76 ul li ul li a:hover{
77 background:#a5d561;
78 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/Jimmy009/archive/2012/02/24/2367148.html

總結(jié)

以上是生活随笔為你收集整理的你会利用css写下拉列表框吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。