看到网上各个网站有各色各样的下拉列表框，你是否有想过自己去做一个出来呢？出于好奇与自强心，我研究了一个下午，发现网上很多的下拉列表框都是利用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 }
扫一扫
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
