投稿 评论 顶部

css下拉菜单

佚名 网络安全

 用CSS也可以实现下拉菜单,而且代码量更少,最起码不用那一大堆的JS控制代码。代码如下:

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 #menu>ul>li
25 {
26     text-align:center;
27     display:inline-block;
28     width:80px;
29 }
30 #menu>ul>li>a
31 {color:#fff;}
32 #menu>ul>li:hover
33 {background:#666;}
34 /* 下拉的菜单栏 */
35 #menu>ul>li ul
36 {
37     display:none;
38     width:150px;
39     position:absolute;
40     background:#c1cd94;
41     box-shadow:2px 2px 2px #000;
42     -webkit-box-shadow:2px 2px 2px #000;
43     -moz-box-shadow:2px 2px 2px #123;
44 }
45 /* 下拉菜单的菜单项 */
46 #menu>ul>li>ul li
47 {padding-left:5px; position:relative;}
48 #menu>ul>li>ul li>a
49 {color:#000;}
50 #menu>ul>li>ul li:hover
51 {background:#d3dbb3;}
52 /* 三级及以下的菜单项的定位 */
53 #menu>ul>li>ul>li ul
54 {left:150px; top:0px;}

  相比于jQuery的实现,各有优缺点。这个实现更加的精炼,不用那一大堆的JS代码以及加载那70多K的jQuery库。当然缺点也有不少:不能实现动画功能,也不能在IE(IE6下肯定不行,其它版本没试过)下运行。