Airbnbのアコーディオンメニューが実装できません

前提・実現したいこと

Airbnb のアコーディオンメニューをjQueryを使わずに実装しようとしています。labelタグとinputタグを使って表示非表示を切り替えて作ろうと思っているのですが
◎labelタグで囲んだロゴマークにカーソルを合わせてもポインターに変わらない
◎ロゴマークをクリックしても展開しない
といった状況です。
何度コードを見返しても原因が特定できず…ご教示いただけますと幸いです。

Airbnb の画面↓

該当のソースコード

バージョンなど）

      <nav>
        <div class="menu">
          <label for="menu-bar"><img src="logo.png" width="30px;"></label>
          <input type="checkbox" id="menu-bar" class="accordion"/>
          <ul id="links">
            <li id="home-border"><a href="/">ホーム</a></li>
            <li><a href="/">友達を招待する</a></li>
            <li><a href="/">ホストを紹介する</a></li>
            <li><a href="/">Ａｉｒｂｎｂビジネスプログラム</a></li>
            <li><a href="/">言語</a></li>
            
          </ul>
          
          <div class="smbg" >
            <video src="headmovie.webm"  autoplay muted></video>
            <div class="bgcontainer">
              <p>世界の果てまで、アットホーム</p>
              <p>airabnbビジネスプログラムの動画を見る</p>
            </div>
          
        </div>
      </div>
    
    </header>

コード

  max-width:100%;
}

.menu a{
  display:block;
  padding:15px;
  text-decoration:none;
  color:rgb(92, 91, 91);
}

.menu label {
  display:block;
  margin:0 0 4px 0;
  padding:15px;
  line-height:1;
  background:#fff;
  cursor:pointer;
  position:fixed;
  transition:all 0.5s;
}

.menu input{
  display:none;
}


#home-border{
  border-bottom:0 gray solid;
}
.menu ul{
  margin:0;
  padding:0;
  background:#f4f4f4;
  list-style:none;
  height:auto;
  height:0;
  overflow:hidden;
  transition:0.5s;
}

#menu-bar:ckecked +.menu ul {
  height:auto;
  padding:5px;
  background:#eaeaea;
  opacity:1;
}

コード