css实现二级菜单

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

第一步：初始化

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

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

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

html

<ul class="menu">    <li class="main-menu">      <label for="ck1">          <span>水果</span>          </label>      <input id="ck1" type="checkbox">      <ul class="sub-menu-container">        <li class="sub-menu">橘子</li>        <li class="sub-menu">香蕉</li>        <li class="sub-menu">苹果</li>      </ul>    </li>    <li class="main-menu">      <label for="ck2">          <span>水果</span>          </label>      <input id="ck2" type="checkbox" checked>      <ul class="sub-menu-container">        <li class="sub-menu checked">橘子</li>        <li class="sub-menu checked">香蕉</li>        <li class="sub-menu checked">苹果</li>      </ul>    </li>  </ul>

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

<ul class="menu">    <li class="main-menu">      <label for="ck3">          <span>水果</span>          </label>      <input id="ck3" class="ck" type="checkbox">      <ul class="sub-menu-container">        <li class="sub-menu">橘子</li>        <li class="sub-menu">香蕉</li>        <li class="sub-menu">苹果</li>      </ul>    </li>    <li class="main-menu">      <label for="ck4">          <span>水果</span>          </label>      <input id="ck4" class="ck" type="checkbox" checked>      <ul class="sub-menu-container">        <li class="sub-menu">橘子</li>        <li class="sub-menu">香蕉</li>        <li class="sub-menu">苹果</li>      </ul>    </li>  </ul>

css

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

效果图

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

第三步优化

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

<ul class="menu">    <li class="main-menu">      <label for="ck5" class="menu-label">          <span>水果</span>          </label>      <input id="ck5" class="ck-finished" type="checkbox">      <ul class="sub-menu-container">        <li class="sub-menu-finished">橘子</li>        <li class="sub-menu-finished">香蕉</li>        <li class="sub-menu-finished">苹果</li>      </ul>    </li>  </ul>

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图？大佬告诉我一下吧。