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>
