一个用纯CSS实现的下拉菜单

之前写过一个用jQuery实现的下拉菜单，可以实现无限级子菜单。其实用CSS也可以实现相同的功能，而且代码量更少，最起码不用那一大堆的JS控制代码。代码如下：

这是HTML代码

1. <div id="menu">
2. <ul>
3. <li><a href="">菜单一</a>
4.     <ul>
5.     <li><a href="">子菜单1</a></li>
6.     <li><a href="">子菜单2</a>
7.          <ul><li><a href="">子菜单7</a></li></ul>
8.     </li>
9.     <li><a href="">子菜单3</a></li>
10.     </ul>
11. </li>
12. <li><a href="">菜单二</a>
13.     <ul>
14.     <li><a href="">子菜单4</a></li>
15.     <li><a href="">子菜单5</a></li>
16.     <li><a href="">子菜单6</a></li>
17.     </ul>
18. </li>
19. </ul>
20. </div>

下面是CSS控制代码，相比之前的，就多了一句#menu li:hover>ul{display:block;}，就是只有在鼠标悬停在<li>时才显示其子标签<ul>。这也是控制子菜单显示的关键所在。

1. ul,ol,li
2. {list-style:none;padding:0px;margin:0px;}
3. #menu *
4. {line-height:30px;z-index:10;}
5. #menu a
6. {
7.     text-decoration:none;
8.     display:block;
9. }
10. #menu ul
11. {
12.     text-align:left;
13.     background:#333;
14. }
15. #menu .arrow  /* 菜单项的右侧小箭头  */
16. {
17.     float:right;
18.     padding-right:5px;
19. }
20. #menu li:hover>ul
21. {display:block;}
22. #menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */
23. 
    
24. /* 一级菜单 */
25. #menu>ul>li
26. {
27.     text-align:center;
28.     display:inline-block;
29.     width:80px;
30. }
31. #menu>ul>li>a
32. {color:#fff;}
33. #menu>ul>li:hover
34. {background:#666;}
35. 
    
36. /* 下拉的菜单栏 */
37. #menu>ul>li ul
38. {
39.     display:none;
40.     width:150px;
41.     position:absolute;
42.     background:#c1cd94;
43.     box-shadow:2px 2px 2px #000;
44.     -webkit-box-shadow:2px 2px 2px #000;
45.     -moz-box-shadow:2px 2px 2px #123;
46. }
47. /* 下拉菜单的菜单项 */
48. #menu>ul>li>ul li
49. {padding-left:5px; position:relative;}
50. #menu>ul>li>ul li>a
51. {color:#000;}
52. #menu>ul>li>ul li:hover
53. {background:#d3dbb3;}
54. 
    
55. /* 三级及以下的菜单项的定位 */
56. #menu>ul>li>ul>li ul
57. {left:150px; top:0px;}

相比于之前的jQuery实现，各有优缺点。这个实现更加的精炼，不用那一大堆的JS代码以及加载那70多K的jQuery库。当然缺点也有不少：不能实现动画功能，也不能在IE(IE6下肯定不行，其它版本没试过)下运行。对目前国内的情况来说，这代码未没有多少的实用性。

有兴趣的朋友可去看一下演示程序。

本文采用  知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议 进行许可。
转载时请注明出处： http://www.caixw.com/archives/drop-down-menu-with-css3.html

转载于:https://www.cnblogs.com/caixw/archive/2010/08/27/drop-down-menu-with-css3.html