《一个用纯css实现的下拉菜单》由会员分享，可在线阅读，更多相关《一个用纯css实现的下拉菜单（2页珍藏版）》请在金锄头文库上搜索。
1、 用 CSS 也可以实现下拉菜单，而且代码量更少，最起码不用那一大堆的 JS 控制代码。代码如下：1 2 3 菜单一4 5 子菜单 16 子菜单 27 子菜单 78 9 子菜单 310 11 12 菜单二13 14 子菜单 415 子菜单 516 子菜单 617 18 19 20 下面是 CSS 控制代码，相比之前的，就多了一句#menu li:hoveruldisplay:block;，就是只有在鼠标悬停在时才显示其子标签。这也是控制子菜单显示的关键所在。1 ul,ol,li2 list-style:none;padding:0px;margin:0px;3 #menu *4 line-he
2、ight:30px;z-index:10;5 #menu a6 7 text-decoration:none;8 display:block;9 10 #menu ul11 12 text-align:left;13 background:#333;14 15 #menu .arrow /* 菜单项的右侧小箭头 */16 17 float:right;18 padding-right:5px;19 20 #menu li:hoverul21 display:block;22 #menuulheight:30px; /* 即使没有菜单项也能保持顶级菜单栏的高度。 */23 /* 一级菜单 */2
3、4 #menuulli25 26 text-align:center;27 display:inline-block;28 width:80px;29 30 #menuullia31 color:#fff;32 #menuulli:hover33 background:#666;34 /* 下拉的菜单栏 */35 #menuulli ul36 37 display:none;38 width:150px;39 position:absolute;40 background:#c1cd94;41 box-shadow:2px 2px 2px #000;42 -webkit-box-shadow:
4、2px 2px 2px #000;43 -moz-box-shadow:2px 2px 2px #123;44 45 /* 下拉菜单的菜单项 */46 #menuulliul li47 padding-left:5px; position:relative;48 #menuulliul lia49 color:#000;50 #menuulliul li:hover51 background:#d3dbb3;52 /* 三级及以下的菜单项的定位 */53 #menuulliulli ul54 left:150px; top:0px;相比于 jQuery 的实现，各有优缺点。这个实现更加的精炼，不用那一大堆的 JS 代码以及加载那 70 多 K 的 jQuery 库。当然缺点也有不少：不能实现动画功能，也不能在IE(IE6 下肯定不行，其它版本没试过)下运行。
