css3导航hover悬停效果

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title></title>
     <link rel="stylesheet" href="">
 <style type="text/css">
 *{margin: 0;padding: 0;}
 .nav{
 height: 60px;
 width: 100%;
 background: #5ab60d;
 clear: both;
 overflow: hidden;
 }
 .nav_box{
 width: 1200px;
 height: 60px;
 line-height: 60px;
 margin: 0 auto;
 }
 .nav_box a{
 display: block;
 width: 99px;
 height: 100%;
 float: left;
 position: relative;
 z-index: 0;
 }
 .nav_box a span{
 display: inline-block;
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 line-height: 60px;
 text-align: center;
 color: #fff;
 font-size: 18px;
 z-index: 2;
 overflow: hidden;
 }

 .nav_box a:hover em{
     top: 0;
 }
 .nav_box a em{
     display: inline-block;
     height: 100%;
     width: 100%;
     transition: all .3s;
     background: #4fa10b;
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1;
 }
 </style>

 </head>
 <body>
     <div class="nav">
         <div class="nav_box">
             <a href=""><span>首页</span><em></em></a>
             <a href=""><span>积分商城</span><em></em></a>
             <a href=""><span>第三个</span><em></em></a>
         </div>
     </div>
 </body>
 </html>