<body>
  <!--アコーディオンメニュー部分 start-->
  <nav class="accordion">
    <!--1階層アコーディオン start-->
    <label for="menu1">menu1 ▼</label>
    <input type="checkbox" id="menu1" class="toggle" />
    <ul>
      <li><a href="#">menu1.1</a></li>
      <li><a href="#">menu1.1</a></li>
    </ul>
    <!--1階層アコーディオン end-->
    <!--2階層アコーディオン start-->
    <label for="menu2">menu2 ▼</label>
    <input type="checkbox" id="menu2" class="toggle" />
    <ul>
      <li><a href="#">menu2.1</a></li>
      <li><a href="#">menu2.1</a></li>
      <label for="menu2_1">menu2.1 ▼</label>
      <input type="checkbox" id="menu2_1" class="toggle" />
      <ul>
        <li><a href="#">menu2.2</a></li>
        <li><a href="#">menu2.2</a></li>
      </ul>
    </ul>
    <!--2階層アコーディオン end-->
    <a href="#">menu3</a>
  </nav>
  <!--アコーディオンメニュー部分 end-->
</body>
.accordion ul {
	list-style: none;
	margin:0;
}
label{
	cursor: pointer;
}
.toggle{
	display: none;
}
.toggle + ul{
	max-height: 0;
	overflow: hidden;
	transition: all .5s ease;
}
.toggle:checked + ul{
	max-height: 500px;
	transition: all 2s ease-in;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.