你会利用css写下拉列表框吗？
看到网上各个网站有各色各样的下拉列表框，你是否有想过自己去做一个出来呢？出于好奇与自强心，我研究了一个下午，发现网上很多的下拉列表框都是利用 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 文件的完整的代码和效果图：
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 }