jQuery实现导航回弹效果

效果图：

代码如下：

 
 
 
 
 
 
  *{margin:0;padding:0;}
  .box{width:1100px ;height: 70px;margin: 100px auto;background: hotpink;padding: 0 0 0 200px;box-sizing: border-box;}
  .nav {float: left;height: 70px;line-height: 55px;position: relative;cursor: pointer;}
  .nav-now{background: url(images/nav_now_bg.png)center 50px no-repeat;}
  .nav h1{font-size: 24px;}
  .box .nav+.nav{margin-left: 50px;}
  .box .nav span{width: 25px;height: 25px;position: absolute;background: url(images/nav_xiajiantou.png)center no-repeat;top: 15px;right: -35px;}
  .nav ul{position: absolute;background: hotpink;width: 160px;top: 70px;left: -15px;display: none;}
  .nav ul li{list-style: none;line-height: normal;padding: 10px 0 10px 20px;cursor: pointer;transition:padding-left 0.5s ease; }
  .nav ul li:hover{background: yellowgreen url(images/nav_li_bg.png)142px center no-repeat;padding-left:35px ;}
  .nav:hover{background: url(images/nav_now_bg.png)center 50px no-repeat;}
 
 
 
 
  
  一级菜单
  
  

   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
  
  
  
  一级菜单
  
  

   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
  
  
  
  一级菜单
  
  

   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
   
二级菜单
  
  
  
  一级菜单
  
 
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！