基于JavaScript实现多级菜单效果

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

具体代码如下：

  
  
  
    *{
      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;
    }
  


  
    

      

 
 第一级第一个
 

   
第二级第一个
   

     第二级第二个
     

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

  第三极第三个
  

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

     
   
   

     第二级第三个
     

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

      

 
 第一级第一个
 

   
第二级第一个
   

     第二级第二个
     

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

  第三极第三个
  

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

     
   
   

     第二级第三个
     

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