css3导航hover悬停效果 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title></title>
 7     <link rel="stylesheet" href="">
 8 <style type="text/css">
 9 *{margin: 0;padding: 0;}
10 .nav{
11 height: 60px;
12 width: 100%;
13 background: #5ab60d;
14 clear: both;
15 overflow: hidden;
16 }
17 .nav_box{
18 width: 1200px;
19 height: 60px;
20 line-height: 60px;
21 margin: 0 auto;
22 }
23 .nav_box a{
24 display: block;
25 width: 99px;
26 height: 100%;
27 float: left;
28 position: relative;
29 z-index: 0;
30 }
31 .nav_box a span{
32 display: inline-block;
33 position: absolute;
34 left: 0px;
35 top: 0px;
36 width: 100%;
37 height: 100%;
38 line-height: 60px;
39 text-align: center;
40 color: #fff;
41 font-size: 18px;
42 z-index: 2;
43 overflow: hidden;
44 }
45 
46 .nav_box a:hover em{
47     top: 0;
48 } 
49 .nav_box a em{
50     display: inline-block;
51     height: 100%;
52     width: 100%;
53     transition: all .3s;
54     background: #4fa10b;
55     position: absolute;
56     top: 100%;
57     left: 0;
58     z-index: 1;
59 }
60 </style>
61 
62 </head>
63 <body>
64     <div class="nav">
65         <div class="nav_box">
66             <a href=""><span>首页</span><em></em></a>
67             <a href=""><span>积分商城</span><em></em></a>
68             <a href=""><span>第三个</span><em></em></a>
69         </div>
70     </div>
71 </body>
72 </html>

 

posted @ 2017-02-06 22:02  向着太阳生  阅读(1254)  评论(0)    收藏  举报