求下拉子菜单代码纯css

Answer 1

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 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 /* 三级及以下的菜单项的定位 */53 #menu>ul>li>ul>li ul54 {left:150px; top:0px;}