CSS3制作立体导航

<ul class="nav">
    <li><a href="">首页</a></li>
    <li><a href="">关于我们</a></li>
    <li><a href="">展示</a></li>
    <li><a href="">管理</a></li>
    <li><a href="">文化</a></li>
    <li><a href="">联系我们</a></li>
</ul>

  <style>
         body{
             background: #ebebeb;
         }
         .nav{
             width:450px;
             height: 50px;
             font:bold 0/50px Arial;
             margin:40px auto 0;
             background: #3fbeff;
             border-radius:5px;
             box-shadow:0 4px #04a7fa; /*阴影*/
         }

         .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;   /*持续时间0.2s，延迟时间0.5s，渐显效果ease-in*/
         }
         .nav a:hover{
             -webkit-transform:rotate(10deg);
             -moz-transform:rotate(10deg);
             -o-transform:rotate(10deg);
             -ms-transform:rotate(10deg);
             transform:rotate(10deg);  /*鼠标移上去后，顺时针旋转10度*/
         }

         .nav li{
             position:relative;
             display:inline-block;
             padding:0 16px;
             font-size: 12px;
             text-shadow:1px 2px 4px rgba(0,0,0,.5); /*文本阴影，0.5的透明*/
             list-style: none outside none;
         }

         .nav li{
             background:linear-gradient(to bottom,#04a7fa,#0599e4,#0488cb) no-repeat right / 1px 15px;
         } /*右边的一条小线*/

         .nav li:last-child{background:none;}  /*删除伪元素的最后一个分割线*/

         .nav a,
         .nav a:hover{
             color:#fff;
             text-decoration: none;
         }
     </style>

效果图：