一个用纯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;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */

  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;}

  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;}

  55. /* 三级及以下的菜单项的定位 */
  56. #menu>ul>li>ul>li ul
  57. {left:150px; top:0px;}

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

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

posted @ 2010-08-27 21:08  caixw  阅读(619)  评论(2)  编辑  收藏  举报