CSS下拉导航未显示-切换：选中

这个问题以前有人问过，但我搜索了又搜索，但因为我对一些术语不太熟悉，我正在努力寻找答案（我希望不会太难）

我正在尝试使用纯CSS创建一个导航栏/切换/汉堡包响应下拉菜单。然而，当我点击汉堡包显示下拉菜单时，什么也没有发生

这是我的CSS

   $navigation-height: 72px;

    section.navigation {
      width: 100%;
      margin-top: 0px;
      border-bottom: $base-border;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      height: $navigation-height;

     figure {
      max-width: 25%;
      margin-left: $base-spacing;

      img#logo {
       max-height: 42px;
       display: block;
      }

      @media screen and (max-width: 700px) {
       max-width: 50%;
      }
     }

    nav {
     margin-left: auto;
     margin-right: $small-spacing;

    a {
      margin: 0 $small-spacing;
      text-decoration: none;
       }
      }
     }

    label {
    font-size: 30px;
    display: none;
    float: right;
    margin-right: 2%;
    color: $blue;
    }

    #toggle {
     display: none;
    }

    @media screen and (max-width: 500px) {
      label {
          display: block;
          cursor: pointer;
      }
      .menu {
          text-align: center;
          width: 100%;
         visibility: collapse;
      }
    .menu a {
      display: block;
      border-bottom: 1px solid black;
      line-height: 30px;

    }
    #toggle:checked ~ * .menu {
        display: block;
     }
    }

我的html.erb是：

    <section class="navigation">
  <figure>
    <%= link_to root_path do %>
      <%= image_tag 'logo.png', id: 'logo' %>
    <% end %>
  </figure>

  <nav class="menu">
    <%= link_to 'FAQs', faqs_path %>
    <%= link_to 'Home', root_path %>

    <% if user_signed_in? %>
      <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
    <% else %>
      <%= link_to 'Login', new_user_session_path %>
    <% end %>

    <% if current_admin %>
      <%= link_to 'Logout Admin', destroy_admin_session_path, method: :delete %>
    <% end %>
  </nav>

  <label for="toggle">HAMBURGER ICON</label>
  <input type="checkbox" id="toggle"></input>

</section>

但我不知道怎么/为什么会有这样的想法

---

提前谢谢。

您需要将输入字段移动到菜单之前的同级，并将css选择器更新为

#切换：选中~。菜单

~selector告诉类查找后续的同级-如果看到#toggle元素位于代码的末尾，它将找不到。此外，*选择器告诉代码查找输入后面的任何元素，并在该元素中查找.menu类，这就是为什么应该删除它

#toggle:checked ~ * .menu {
        display: block;
     }