<div class="wrap">
      	<label class="title" for="box1">クリックして開閉</label>
      	<input type="checkbox" id="box1">
      	<ul class="toggle">
      		<li>なんらか</li>
      		<li>なんらか</li>
      		<li>なんらか</li>
      	</ul>
      </div>
      

.wrap{
      	overflow: hidden;
      }

      input{
      	display: none;
      }

      .title{
      	position: relative;
      	z-index: 2;
      }

      input + .toggle{
      	height: 0;
      	transform: translateY(-100%);
      	transform-origin: top;
      	transition: .3s;
      }

      input + .toggle li{
      	opacity: 0;
      }

      input:checked + .toggle{
      	height: auto;
      	transform: translateY(0);
      }

      input:checked + .toggle > li{
      	opacity: 1;
      }
      

<div id="header">
      	<input type="checkbox" id="menu">
      	<label class="title" for="menu">メニュー</label>
      	<ul class="toggle">
      		<li>なんらか</li>
      		<li>なんらか</li>
      		<li>なんらか</li>
      	</ul>
      </div>
      

#header{
      	position: relative;
      }

      input{
      	display: none;
      }

      .title{
      	position: relative;
      	z-index: 9999;
      }

      .title::before{
      	content: "▼";
      }

      input ~ .toggle{
      	position: absolute;
      	z-index: 9998;
      	width: 100%;
      	transform: translateY(-100%);
      	transition: .3s;
      }

      input:checked ~ .title::before{
      	content: "×";
      }

      input:checked ~ .toggle{
      	transform: translateY(0);
      }