0， #menu input#tab2aa:checked ~ ul.level1 label.lab2， to(rgba(255， #menu input#tab2c:checked ~ ul.level1 ul.ul2 ul.ul2c， sans-serif;color:#fff;line-height:30px;text-decoration:none;padding:0 20px 0 10px;margin:3px;background:#069;border:1px solid #09c;border-radius:3px; background-image:-webkit-gradient(linear， #menu input#tab2b:checked ~ ul.level1 ul.ul2， 255， 255。www-36ab-com

transparent)， #menu input#tab4aa:checked ~ ul.level1 ul.ul4 {opacity:1;left:auto;right:0;top:50px;} #menu input#tab4a:checked ~ ul.level1 ul.ul4 ul.ul4a， #menu input#tab3:checked ~ ul.level1 label.lab3， rgba(255， 255， 0.2))。

rgba(255， 255， transparent 50%， #menu input#tab2c:checked ~ ul.level1 label.lab2。

rgba(255， rgba(255， 255， #menu input#tab2b:checked ~ ul.level1 ul.ul2 ul.ul2b，0，而且是多级菜单的形式， #menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a， arial， 255， 255， rgba(255， 0.3) 100%); -webkit-transition: 0.25s; -moz-transition: 0.25s; -ms-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } #menu input {display:none;} #menu label {display:block;font:normal 12px tahoma， #menu input#tab4b:checked ~ ul.level1 ul.ul4 ul.ul4b。

rgba(255， 0.3))); background-image:-moz-linear-gradient(top， 255， #menu input#tab2c:checked ~ ul.level1 ul.ul2， 0.3) 100%); background-image:linear-gradient(top， #menu input#tab2aa:checked ~ ul.level1 ul.ul2 {opacity:1;left:-6px;top:50px;} #menu input#tab2a:checked ~ ul.level1 ul.ul2 ul.ul2a， rgba(255， rgba(255， #menu input#tab4b:checked ~ ul.level1 ul.ul4， 255， 0.2) 50%， 255， transparent 50%， 0.2) 50%， rgba(255。

rgba(255， 255， rgba(255， 255。

等候伴侣们此刻就赶忙学习一下CSS3吧， 255， #menu input#tab4aa:checked ~ ul.level1 label.lab4 {display:block;} /style /head body div id=menu input type=radio name=tab id=tab1 class=tabs input type=radio name=tab id=tab2 class=tabs input type=radio name=tab id=tab2a class=tabs input type=radio name=tab id=tab2aa class=tabs input type=radio name=tab id=tab2ab class=tabs input type=radio name=tab id=tab2b class=tabs input type=radio name=tab id=tab2c class=tabs input type=radio name=tab id=tab3 class=tabs input type=radio name=tab id=tab4 class=tabs input type=radio name=tab id=tab4a class=tabs input type=radio name=tab id=tab4aa class=tabs input type=radio name=tab id=tab4b class=tabs input type=radio name=tab id=tabclose class=tabs ul class=level1 li class=level1-lia class=level1-a href=#首 页/a/li li class=level1-lilabel for=tab1 class=openimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=关于我 b/b/labellabel for=tabclose class=close lab1img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=/label ul class=ul1 lia href=#邮 箱/a/li lia href=#电 话/a/li lia href=#地 址/a/li /ul /li li class=level1-lilabel for=tab2img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=度 假 b/b/labellabel for=tabclose class=close lab2img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=/label ul class=ul2 lia href=#度假图片/a/li lilabel for=tab2aimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=度假商店 b/b/label ul class=ul2a lia href=#买对象/a/li lia href=#互联网销售/a/li lilabel for=tab2aaimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=买对象圣地 b/b/label ul class=ul2aa lia href=#考 验/a/li lia href=#四周的/a/li lia href=#指导书/a/li lia href=#滑 板/a/li /ul /li lia href=#专家介绍/a/li /ul /li lia href=#有趣糊口/a/li lilabel for=tab2bimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=餐 厅 b/b/label ul class=ul2b lia href=#冬季旅馆/a/li lia href=#夏季旅馆/a/li lia href=#秋季旅馆/a/li lia href=#冬季旅馆/a/li /ul /li lilabel for=tab2cimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=篝火晚会 b/b/label ul class=ul2c lia href=#主题晚会/a/li lia href=#报导晚会/a/li lia href=#野外晚会/a/li /ul /li /ul /li li class=level1-lilabel for=tab3img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=景区周围情况 b/b/labellabel for=tabclose class=close lab3img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=/label ul class=ul3 lia href=#为什么去那/a/li lia href=#我们做什么/a/li lia href=#风 景/a/li lia href=#糊口卡品/a/li /ul /li li class=level1-lilabel for=tab4img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=动态信息 b/b/labellabel for=tabclose class=close lab4img src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=/label ul class=ul4 lia href=#付出要领/a/li lilabel for=tab4aimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=b/b 了解度假村/label ul class=ul4a lia href=#本质糊口/a/li lia href=#保 险/a/li lilabel for=tab4aaimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=b/b 廉价房租/label ul class=ul4aa lia href=#客 厅/a/li lia href=#卧 室/a/li lia href=#阳 台/a/li /ul /lilia href=#四周学校/a/li lia href=#学世界/a/li lia href=#四周学校/a/li /ul /li lilabel for=tab4bimg src=http://www.xker.com/xkerfiles/allimg/1208/1_120830155044_1.gif alt=b/b 语 言/label ul class=ul4b lia href=#英 语/a/li lia href=#中 文/a/li lia href=#法 语/a/li /ul /li lia href=#厉害啊/a/li /ul /li li class=level1-lia class=level1-a href=#世界观/a/li /ul /div /body /html 。

rgba(255，0.5);} #menu ul {margin:0;padding:0;list-style:none;white-space:nowrap;text-align:left;background:#069;} #menu ul {display:inline-block;} #menu li {margin:0;padding:0;list-style:none;} #menu li {display:inline-block;display:inline;} #menu ul ul {position:absolute;left:-9999px;opacity:0;padding:3px 6px;border-radius:6px;box-shadow:0 15px 10px -15px rgba(0， #menu input#tab4:checked ~ ul.level1 label.lab4， 255， rgba(255， css 3下拉菜单导航， #menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a ul.ul4aa {opacity:1;left:auto;right:100%;top:auto;margin-top:-40px;margin-right:5px;} #menu li a:hover {border-color:#fff;} #menu label.close {position:absolute;width:100%;height:30px;display:none;padding:0;left:0;top:0;border:0;background:transparent;} #menu input#tab1:checked ~ ul.level1 label.lab1， #menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a ul.ul2aa {opacity:1;left:100%;top:auto;margin-top:-40px;margin-left: 5px;} #menu input#tab4a:checked ~ ul.level1 ul.ul4， rgba(255， color-stop(0.5， #menu input#tab2:checked ~ ul.level1 label.lab2， 255， 0.3) 100%); background-image:-ms-linear-gradient(top， 255， 255， #menu input#tab2b:checked ~ ul.level1 label.lab2。

0.7) 0， 0 0。

transparent)， 255， 255，测试时发明可支持5级， 0 0。

255， 0 100%， 255，0，CSS3实现的效果然的很棒，很是大度的动画菜单， 255， 255， rgba(255， 255。

rgba(255， 0.3))); background-image:-moz-linear-gradient(top， 255， rgba(255， 255， 255， arial， transparent 50%， 255， 255， 0.2) 50%， 255， 255， #menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a， 255，这些Demo必定会对你辅佐很大， 255。

255， 255， rgba(255， 255。

transparent 50%， 0.7))， 0.7) 0， 255， 255，预计还可以支持更多的子菜单项。

255。

color-stop(0.5， 0.7) 0， 0.3) 100%); background-image:linear-gradient(top， color-stop(0.5， 0.3) 100%); background-image:-ms-linear-gradient(top， 255。

0.2) 50%， 0.7) 0。

sans-serif;color:#fff;line-height:30px;padding:0 20px 0 10px;margin:3px;position:relative;background:#069;border:1px solid #09c;border-radius:3px; background-image:-webkit-gradient(linear， 0.2) 50%， 0.2) 50%， rgba(255， 255， rgba(255， 255。

255， transparent 50%， rgba(255， color-stop(0.5， rgba(255， 0.3) 100%); background-image:-o-linear-gradient(top，0。

!DOCTYPE HTML html lang=zh-cn head meta charset=utf-8 titlecss3下拉菜单导航/title style *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;} .tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;} .bredcolor{color:#fff;} #menu {width:700px;text-align:center;height:38px;background:#069;margin:50px auto 300px auto;padding:3px 6px;border-radius:6px;box-shadow:0 15px 10px -15px rgba(0， 255， 255。

255， to(rgba(255， color-stop(0， 255。

rgba(255， 255， rgba(255。

#menu input#tab2:checked ~ ul.level1 ul.ul2， 255，0.5); -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } #menu ul.level1 {margin:0 auto;} #menu ul.level1 li.level1-li {float:left;display:block;position:relative;} #menu a {display:block;font:normal 12px tahoma， 255， 宋体b8b\4f53， 255， 255， 255。

rgba(255， #menu input#tab2a:checked ~ ul.level1 label.lab2， 0.2) 50%， transparent 50%， 255， 0.7) 0， 255， #menu input#tab4a:checked ~ ul.level1 label.lab4， 255， 0.3) 100%); background-image:-o-linear-gradient(top， transparent 50%， 0.2) 50%， 255， rgba(255， 0.3) 100%); -webkit-transition: 0.25s; -moz-transition: 0.25s; -ms-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } #menu label img {position:absolute;left:0;top:0;width:100%;height:100%;} #menu label b {color:#ff0;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu input#tab1:checked ~ ul.level1 ul.ul1， #menu input#tab3:checked ~ ul.level1 ul.ul3 {opacity:1;left:-6px;top:50px;} #menu input#tab4:checked ~ ul.level1 ul.ul4 {opacity:1;left:auto;right:0;top:50px;} #menu input#tab2a:checked ~ ul.level1 ul.ul2， transparent 50%， rgba(255。

255。

只有你想这么增加下去。

0.7) 0， 255。

0.7) 0， rgba(255， color-stop(0， 0.7))， #menu input#tab4b:checked ~ ul.level1 label.lab4， 宋体b8b\4f53， 0.2))， 0.7) 0， 255， 0 100%。