仅使用HTML与CSS实现可展开下拉菜单的问题咨询

问题根因 #

CSS 同级兄弟选择器~仅能匹配同一父元素下、位于当前元素之后的同级节点。你现有代码中#menu是嵌套在#nav-bar内部.snc-header中的子元素，和#nav-bar不属于同级节点，因此#menu:checked~#nav-bar ul的匹配规则永远无法触发。

修复实现 #

方案1：CSS :has选择器实现（无需修改HTML，2023年后发布的主流浏览器均支持）

直接替换原有CSS即可：

#nav-bar ul {
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  width: 0;
}

/* 匹配内部checkbox被勾选的导航容器下的菜单列表 */
#nav-bar:has(#menu:checked) ul {
  visibility: visible;
  height: 100vh;
  width: 25vw;
}

方案2：兼容老旧浏览器实现

先调整HTML结构，将checkbox移到导航容器根层级，和头部、导航列表同级，还可以新增label自定义菜单触发按钮：

<div class="site-nav-container" id="nav-bar" style="display: block">
  <input type="checkbox" id="menu">
  <div class="snc-header">
    <label for="menu">菜单</label>
  </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>

对应CSS代码：

/* 隐藏默认checkbox */
#menu {
  display: none;
}

#nav-bar ul {
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  width: 0;
}

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

内容的提问来源于stack exchange，提问作者qfitz