本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码。分享给大家供大家参考。具体如下：
这是一款基于css3实现的下拉菜单导航，是非常漂亮的动画菜单，而且是多级菜单的形式，测试时发现可支持5级，估计还可以支持更多的子菜单项，只有你想这么增加下去，CSS3实现的效果真的很棒，期待朋友们现在就赶快学习一下CSS3吧，这些Demo肯定会对你帮助很大。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
复制代码代码如下:
css3下拉菜单导航
*{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,0,0,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,0,0,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, arial, 宋体b8b\4f53, 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, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 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, arial, 宋体b8b\4f53, 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 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 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#tab2:checked ~ ul.level1 ul.ul2,
#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,
#menu input#tab2b:checked ~ ul.level1 ul.ul2,
#menu input#tab2c:checked ~ ul.level1 ul.ul2,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 {opacity:1;left:-6px;top:50px;}
#menu input#tab2a:checked ~ ul.level1 ul.ul2 ul.ul2a,
#menu input#tab2b:checked ~ ul.level1 ul.ul2 ul.ul2b,
#menu input#tab2c:checked ~ ul.level1 ul.ul2 ul.ul2c,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a,
#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,
#menu input#tab4b:checked ~ ul.level1 ul.ul4,
#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#tab4b:checked ~ ul.level1 ul.ul4 ul.ul4b,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a,
#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#tab2:checked ~ ul.level1 label.lab2,
#menu input#tab2a:checked ~ ul.level1 label.lab2,
#menu input#tab2b:checked ~ ul.level1 label.lab2,
#menu input#tab2c:checked ~ ul.level1 label.lab2,
#menu input#tab2aa:checked ~ ul.level1 label.lab2,
#menu input#tab3:checked ~ ul.level1 label.lab3,
#menu input#tab4:checked ~ ul.level1 label.lab4,
#menu input#tab4a:checked ~ ul.level1 label.lab4,
#menu input#tab4b:checked ~ ul.level1 label.lab4,
#menu input#tab4aa:checked ~ ul.level1 label.lab4 {display:block;}
首 页关于我↓邮 箱电 话地 址度 假↓度假图片度假商店→买东西互联网销售买东西圣地→考 验附近的指导书滑 板专家介绍有趣生活餐 厅→冬季旅馆夏季旅馆秋季旅馆冬季旅馆篝火晚会→主题晚会报导晚会野外晚会景区周围环境↓为什么去那我们做什么风 景生活卡品动态信息↓支付方法←了解度假村本质生活保 险←廉价房租客 厅卧 室阳 台附近学校学世界附近学校←语 言英 语中 文法 语厉害啊世界观
希望本文所述对大家的css3网页设计有所帮助。
