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>