css实现二级菜单

不多废话，先上预览
https://codepen.io/Ritr/pen/W...
这一次还是使用的选中与否来实现展开、收起二级菜单的。

第一步：初始化

默认二级菜单的li高度为0

选择一级菜单时，将二级菜单高度设置为20px

这样设置是为了方便我们以后添加动画效果

html

    

      
          水果    
      
      
      

        
橘子
        
香蕉
        
苹果
      
    
    

      
          水果    
      
      
      

        
橘子
        
香蕉
        
苹果
      
    
  

css

/* 初始化 */
*{
  margin:0;
  padding:0
}
.container{
  width:500px;
  margin:0 auto;
  text-align:center;
}
.menu{
  width:200px;
  display:inline-block;
}
li{
  list-style:none;
  cursor:pointer;
  text-align:left;
  text-indent:5px;
}
.main-menu{
  background:#0099CC;
  margin:1px 0;
}
.sub-menu{
  background:#00CCFF;
  margin:1px 0;
  overflow:hidden;
  height:0;
}
.sub-menu.checked{
  height:20px;
}

效果图

第二步：选中checkbox时展开二级菜单，取消选择时收起二级菜单

划重点--注意label和input之间的位置
html

    

      
          水果    
      
      
      

        
橘子
        
香蕉
        
苹果
      
    
    

      
          水果    
      
      
      

        
橘子
        
香蕉
        
苹果
      
    
  

css

/* 第二步 */
.ck:checked + .sub-menu-container .sub-menu{
  height:20px;
}

效果图

看起来跟第一步没什么变化

第三步优化

将label设置成和一级菜单同样大小，隐藏checkbox，添加动画
html

    

      
          水果    
      
      
      

        
橘子
        
香蕉
        
苹果
      
    
  

css

.menu-label{
  display:inline-block;
  width:100%;
  cursor:pointer;
}


/* 隐藏checkbox */
.ck-finished{
  display:none;
}
.ck-finished:checked + .sub-menu-container .sub-menu-finished{
  height:20px;
}
.sub-menu-finished{
  background:#00CCFF;
  margin:1px 0;
  overflow:hidden;
  height:0;
  transition:all 0.4s;/* 添加动画 */
}

效果图

哈哈，变化不大。还是需要你点击预览一下的。
另外怎么上次gif图？大佬告诉我一下吧。