<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>