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

光明使者 · 发表于 2013-3-28 08:24:46

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

<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>。这也是控制子菜单显示的关键所在。

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 ul11 {12 text-align:left;13 background:#333;14 }15 #menu .arrow /* 菜单项的右侧小箭头 */16 {17 float:right;18 padding-right:5px;19 }20 #menu li:hover>ul21 {display:block;}22 #menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */23 /* 一级菜单 */24 #menu>ul>li25 {26 text-align:center;27 display:inline-block;28 width:80px;29 }30 #menu>ul>li>a31 {color:#fff;}32 #menu>ul>li:hover33 {background:#666;}34 /* 下拉的菜单栏 */35 #menu>ul>li ul36 {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 li47 {padding-left:5px; position:relative;}48 #menu>ul>li>ul li>a49 {color:#000;}50 #menu>ul>li>ul li:hover51 {background:#d3dbb3;}52 /* 3J及以下的菜单项的定位 */53 #menu>ul>li>ul>li ul54 {left:150px; top:0px;}

光明使者 · 发表于 2013-3-28 08:26:06

发帖时有代码框,但发出来就没,

猫性男孩 · 发表于 2013-3-28 10:02:18

nonono，是先发框，然后再填写代码

光明使者 · 发表于 2013-3-28 10:21:17

猫性男孩发表于 2013-3-28 10:02
nonono，是先发框，然后再填写代码

复制代码

		自动登录	找回密码
密码			立即注册

[特效代码] 一个用纯CSS实现的下拉菜单