使用CSS3制作立体效果的导航菜单

效果如下：

也可以点击网址查看效果：http://keleyi.com/keleyi/phtml/html5/12.htm

请使用支持CSS3的浏览器访问本页面，获得更好效果。

源代码：

 <style>
 .keleyi-com-nav{
 width:520px;
 height: 50px;
 font:bold 0/50px Arial;
 text-align:center;
 margin:40px auto 0;
 border-radius: 8px;
 }
 .keleyi-com-nav a{display: inline-block;
 -webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 -ms-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
 }
 .keleyi-com-nav a:hover{
 -webkit-transform:rotate(10deg);
 -moz-transform:rotate(10deg);
 -o-transform:rotate(10deg);
 -ms-transform:rotate(10deg);
 transform:rotate(10deg);
 }
 .black{
 background: #2c2c2c;
 box-shadow: 0 7px 0 #0b0b0b;
 }
 .red{
 background: #f65f57;
 box-shadow: 0 7px 0 #ba4a45;
 }
 .blue{
 background: #36b7e5;
 box-shadow: 0 7px 0 #3595b8;
 }
 .green{
 background: #9cd564;
 box-shadow: 0 7px 0 #86b65b;
 }
 .keleyi-com-nav li{
 position:relative;
 display:inline-block;
 padding:0 16px;
 font-size: 13px;
 text-shadow:1px 2px 4px rgba(0,0,0,.5);
 list-style: none outside none;
 }

 .keleyi-com-nav li::before,
 .keleyi-com-nav li::after{
 content:"";
 position:absolute;
 top:14px;
 height: 25px;
 width: 1px;
 }
 .keleyi-com-nav li::after{
 right: 0;
 background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 }
 .black li::before{
 left: 0;
 background: -moz-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 background: -webkit-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 background: -o-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 background: -ms-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 background: linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 }
 .red li::before{
 left: 0;
 background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 }
 .blue li::before{
 left: 0;
 background: -moz-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 background: -webkit-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 background: -o-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 background: -ms-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 background: linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 }
 .green li::before{
 left: 0;
 background: -moz-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 background: -webkit-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 background: -o-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 background: -ms-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 background: linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 }
 .keleyi-com-nav li:first-child::before{
 background: none;
 }
 .keleyi-com-nav li:last-child::after{
 background: none;
 }

 .keleyi-com-nav a,
 .keleyi-com-nav a:hover{
 color:#fff;
 text-decoration: none;
 }
 </style>
 <ul class="keleyi-com-nav black">
 <li><a href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li>
 <li><a href="http://keleyi.com/dev/36d87291ba370420.htm">About Me</a></li>
 <li><a href="http://keleyi.com/dev/9c4dbaff0fca9c64.htm">Portfolio</a></li>
 <li><a href="http://keleyi.com/a/bjac/k3pi4ehx.htm">Blog</a></li>
 <li><a href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li>
 <li><a href="http://keleyi.com/game/1/">Contact Me</a></li>
 </ul>
 <ul class="keleyi-com-nav red">
 <li><a href="http://keleyi.com/">首页</a></li>
 <li><a href="http://keleyi.com/ablut/">关于</a></li>
 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li>
 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li>
 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li>
 </ul>
 <ul class="keleyi-com-nav blue">
 <li><a href="http://keleyi.com/a/bjac/et551617.htm">Home</a></li>
 <li><a href="http://keleyi.com/a/bjac/3wjq3xm2.htm">About Me</a></li>
 <li><a href="http://keleyi.com/a/bjac/7slnymte.htm">Portfolio</a></li>
 <li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">Blog</a></li>
 <li><a href="http://keleyi.com/a/bjac/c07969353e71816f.htm">Resources</a></li>
 <li><a href="http://keleyi.com/a/bjac/532bedbffca1affa.htm">Contact Me</a></li>
 </ul>
 <ul class="keleyi-com-nav green">
 <li><a href="http://keleyi.com/">首页</a></li>
 <li><a href="http://keleyi.com/ablut/">关于</a></li>
 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li>
 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li>
 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li>
 </ul>

原文：http://keleyi.com/a/bjac/7slnymte.htm