Trying to create an expandable menu with only html and css

I'm pretty new to coding in general and have been learning CSS. I'm trying to create a drop-down menu page for a website and I'm having difficulty; I understand that JavaScript could probably help with this, but I don't have the time to learn a whole new language.

I've written this code to expand a ul to be visible when a checkbox is checked:

#nav-bar ul {
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden
}

#menu:checked~#nav-bar ul {
  visibility: visible;
  height: 100vh;
  width: 25vw;
}

<div class="site-nav-container" id="nav-bar" style="display: block">
  <div class="snc-header">
    <input type="checkbox" id="menu">
  </div>
  <nav class="site-nav">
    <ul id="menu-primary-nav" class="sn-level-1">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </nav>
</div>