一個用純CSS實現的下拉菜單

作者: caixw 發布時間: 2010-09-05 13:16 閱讀: 14049 次推薦: 2 原文鏈接 [收藏]

摘要：相比于應用js，我們可以簡單應用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下肯定不行，其它版本沒試過)下運行。

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