javascript手风琴下拉菜单实现代码

手风琴下拉菜单实现的效果更灵活，不同与传统的下拉菜单，本文就为大家分享一段javascript手风琴下拉菜单实现代码，先看一看效果图：

具体的javascript手风琴下拉菜单代码：

  *{
    margin: 0;
    padding: 0;
  }
  ul{
    list-style: none;
  }
  .nav ul{
    display: none;
  }
  .nav ul li{
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
  .nav div{
    background: #4ecc70;
    width: 100px;
    border-radius: 10px;
    line-height: 34px;
    text-align: center;
    color: white;
    cursor: pointer;
  }
  .demo{

  }
  .red{
    background:red;
    border-radius: 10px;
  }
   





  

    水果
    

      
香蕉
      
橘子
      
梨子
      
西瓜
    
  
  

    蔬菜
    

      
芹菜
      
黄瓜
      
洋葱
      
西瓜
    
  
  

    肉类
    

      
鸡肉
      
兔肉
      
鸭肉
      
龙肉
    
  
  

以上就是为大家分享的javascript手风琴下拉菜单代码，希望对大家的学习有所帮助，动手为自己的网站实现手风琴下拉菜单吧！