【爆速】CSSだけでアコーディオンメニューを作る方法

<ul class="accordion">
  <li>
    <label for="meat1">鶏肉</label>
    <input type="radio" name="accordion" id="meat1" />
    <ul class="menu">
      <li><a href="#">唐揚げ</a></li>
      <li><a href="#">竜田揚げ</a></li>
      <li><a href="#">フライドチキン</a></li>
    </ul>
  </li>
  <li>
    <label for="meat2">牛肉</label>
    <input type="radio" name="accordion" id="meat2" />
    <ul class="menu">
      <li><a href="#">牛タン</a></li>
      <li><a href="#">カルビステーキ</a></li>
      <li><a href="#">サイコロステーキ</a></li>
    </ul>
  </li>
  <li>
    <label for="meat3">豚肉</label>
    <input type="radio" name="accordion" id="meat3" />
    <ul class="menu">
      <li><a href="#">生姜焼き</a></li>
      <li><a href="#">酢豚</a></li>
      <li><a href="#">豚トロ</a></li>
    </ul>
  </li>
  <li>
    <label for="meat4">鮫</label>
    <input type="radio" name="accordion" id="meat4" />
    <ul class="menu">
      <li><a href="#">フカヒレスープ</a></li>
    </ul>
  </li>
</ul>

.accordion{
  width:200px;
  padding:0;
  color:#fff;
  background-color:#FF8C65;
  margin:0 auto;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  border-radius:5px;
}
.accordion label{
  display:block;
  margin:0;
  line-height: 50px;
  font-size:1.1em;
  font-weight:900;
}
.accordion input{
  position:absolute;
  right:114514em; /*画面外へ*/
}
.accordion .menu{
  display:none; /*非表示に*/
}

.accordion input:checked + .menu{
  display:block;
  animation:slide 0.5s ease-in-out 0s;
}
@keyframes slide{
  0%{
    max-height:0;
  }
  100%{
    max-height:20vh;
  }
}

.accordion label:before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeを読み込む必要あり*/
  content: "f105";
  color: #fff;
  font-weight: 900;
  padding-right:7px;
  padding-left:10px;
  text-shadow: initial;
}
.menu{
  padding:0;
  background-color:#fbfbfb;
  text-align:center;
}
.menu a{
  display:block;
  text-decoration: none;
  line-height: 40px;
  color:#FF8C65;
  width:100%;
}
.accordion label:hover{
  opacity:.7;
}
.menu a:hover{
  background-color:#fcd69e;
}