【初心者向け】CSSだけで切り替えができるタブメニューを実装する方法

<div class="tab">
  <input type="radio" name="tab" id="meat1" checked>
  <label for="meat1">鶏肉</label>
  <input type="radio" name="tab" id="meat2">
  <label for="meat2">牛肉</label>
  <input type="radio" name="tab" id="meat3">
  <label for="meat3">豚肉</label>
　(省略)

(省略)
<div class="foods">
    <ul>
      <li>唐揚げ</li>
      <li>竜田揚げ</li>
      <li>フライドチキン</li>
    </ul>
    <ul>
      <li>牛タン</li>
      <li>肉まん</li>
      <li>サイコロステーキ</li>
    </ul>
    <ul>
      <li>生姜焼き</li>
      <li>酢豚</li>
      <li>チャーシュー</li>
    </ul>
  </div>
</div>

.tab input{
  display:none;
}
.foods ul{
  display:none;
}

.tab input:nth-of-type(1):checked ~ .foods ul:nth-child(1),
.tab input:nth-of-type(2):checked ~ .foods ul:nth-child(2),
.tab input:nth-of-type(3):checked ~ .foods ul:nth-child(3){
  display:block;
}

.tab input:checked + label{
  background-color:rgba(255,179,107,.7);
  color:#fff;
}

.tab{
  margin:2em auto;
  text-align: center;
}
.tab label{
  margin:3em .2em;
  padding:.7em 3em;
  border: 3px solid rgba(255,179,107,.5);
  border-radius:5px;
  box-shadow: 0 2px 2px rgba(0,0,0,.01);
  color:#555;
}
.tab label:hover{/*ホバー*/
  background-color:rgba(255,179,107,.5);
  transform:scale(1.1);
  opacity:.7;
}
.tab input{
  display:none;
}
.foods{
  display:block;
  margin-top:2em;
  text-align:center;
}
.foods ul{
  display:none;
  color:#333;
  text-align:center;
  list-style: none;
  -webkit-animation: slide 0.5s ease-in-out 0s;
  animation:slide 0.5s ease-in-out 0s;
}
.foods ul li:before{
  font-family: "Font Awesome 5 Free";/*Font Awesomeの読み込み必要*/
    content: "f105";
    color: #f8c678;
    font-weight: 900;
    padding-right:7px;
    padding-left:10px;
}
.tab input:nth-of-type(1):checked ~ .foods ul:nth-child(1),
.tab input:nth-of-type(2):checked ~ .foods ul:nth-child(2),
.tab input:nth-of-type(3):checked ~ .foods ul:nth-child(3){
  display:block;
}
.tab input:checked + label{
  background-color:rgba(255,179,107,.7);
  color:#fff;
}
@keyframes slide{
  0%{
    opacity:0;
    transform:translateY(20px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}