<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>
1 <style> 2 body{
3 background: #ebebeb;
4 }
5 .nav{
6 width:450px;
7 height: 50px;
8 font:bold 0/50px Arial;
9 margin:40px auto 0;
10 background: #3fbeff;
11 border-radius:5px;
12 box-shadow:0 4px #04a7fa; /*阴影*/
13 }
14
15 .nav a{
16 display: inline-block;
17 -webkit-transition: all 0.2s ease-in;
18 -moz-transition: all 0.2s ease-in;
19 -o-transition: all 0.2s ease-in;
20 -ms-transition: all 0.2s ease-in;
21 transition: all 0.2s ease-in; /*持续时间0.2s，延迟时间0.5s，渐显效果ease-in*/
22 }
23 .nav a:hover{
24 -webkit-transform:rotate(10deg);
25 -moz-transform:rotate(10deg);
26 -o-transform:rotate(10deg);
27 -ms-transform:rotate(10deg);
28 transform:rotate(10deg); /*鼠标移上去后，顺时针旋转10度*/
29 }
30
31 .nav li{
32 position:relative;
33 display:inline-block;
34 padding:0 16px;
35 font-size: 12px;
36 text-shadow:1px 2px 4px rgba(0,0,0,.5); /*文本阴影，0.5的透明*/
37 list-style: none outside none;
38 }
39
40 .nav li{
41 background:linear-gradient(to bottom,#04a7fa,#0599e4,#0488cb) no-repeat right / 1px 15px;
42 } /*右边的一条小线*/
43
44 .nav li:last-child{background:none;} /*删除伪元素的最后一个分割线*/
45
46 .nav a, 47 .nav a:hover{
48 color:#fff;
49 text-decoration: none;
50 }
51 </style>
效果图：
