看到网上各个网站有各色各样的下拉列表框，你是否有想过自己去做一个出来呢？出于好奇与自强心，我研究了一个下午，发现网上很多的下拉列表框都是利用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 }
来源：http://www.cnblogs.com/Jimmy009/archive/2012/02/24/2367148.html