基于jquery实现多级菜单效果

本文实例为大家分享了jquery实现多级菜单效果展示的具体代码，供大家参考，具体内容如下

 
 
 
  *{
   margin:0;
   padding:0;
   font-size:14px;
  }
  ul,li{
   list-style:none;
  }
  .box{
   margin:10px;
   padding:10px;
   width:300px;
   border:1px dashed #008000;
   
   background:#ffe470;
   background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
   background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
   background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
   background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
  }
  .box li{
   position:relative;
   line-height:30px;
  }
  .box em{
   position:absolute;
   top:7px;
   left:0;
   width:16px;
   height:16px;
   background:url("img/icon.png") no-repeat -59px -28px;
   cursor:pointer;

  }
  .box span{
   display:block;
   padding-left:20px;
  }
  .box em.open{
   background-position:-42px -28px;
  }
  .box .two{
   margin-left:20px;
  }
  .box .three{
   margin-left:40px;
  }
  .box .four{
   margin-left:60px;
  }
  .box .two,.box .three,.box .four{
   display:none;
  }
 


 
  

   

    
    第一级第一个
    

     
第二级第一个
     

      第二级第二个
      

第三极第一个
第三极第二个

 第三极第三个
 

  
第四级第一个
  
第四级第二个
  
第四级第三个
 

      
     
     

      第二级第三个
      

第三级第一个
第三级第二个
第三级第三个
      
     
    
   
  
  

   

    
    第一级第一个
    

     
第二级第一个
     

      第二级第二个
      

第三极第一个
第三极第二个

 第三极第三个
 

  
第四级第一个
  
第四级第二个
  
第四级第三个
 

      
     
     

      第二级第三个
      

第三级第一个
第三级第二个
第三级第三个
      
     
    
   
  
 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。