用CSS實現"點擊"顯示隱藏效果

CSS實現點擊下拉,看清楚題目哦，是點擊下拉。不是hover下拉。

<style lang="">
    ul>li>ul{
      display: none;
    }
    input[type=checkbox]{
      display: none;
    }
    ul li input[type=checkbox]:checked+ul{
      display: block;
    }
 </style>
 <ul>
    <li>
      <label for="checkbox1" >選擇一</label>
      <input type="checkbox" id='checkbox1' checked="true">
      <ul>
        <li>選擇一 ---1</li>
        <li>選擇一 ---2</li>
        <li>選擇一 ---3</li>
      </ul>
    </li>
    <li>
        <label for="checkbox2">選擇二</label>
        <input type="checkbox" id='checkbox2'>
        <ul>
          <li>選擇二 ---1</li>
          <li>選擇二 ---2</li>
          <li>選擇二 ---3</li>
        </ul>
    </li>
    <li>
        <label for="checkbox3">選擇三</label>
        <input type="checkbox" id='checkbox3'>
        <ul>
          <li>選擇三 ---1</li>
          <li>選擇三 ---2</li>
          <li>選擇三 ---3</li>
        </ul>
    </li>
  </ul>
複製代碼