点击Checkbox后ul元素不显示，求纯CSS解决方案

问题原因 #

核心问题是DOM层级关系错误：#check 是 #hamcross 的子元素，而 #nav-list 是 #hamcross 的同级元素。你使用的相邻兄弟选择器 ~ 只能选择同一父级下的后续兄弟元素，因此 #check:checked ~ #nav-list 根本无法匹配到目标导航列表。

解决方法（两种可选） #

方法一：调整DOM结构（兼容性最优） #

将checkbox移到与#nav-list同级的位置，让选择器能够正确匹配：

修改后的HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"  />

<nav>
  <div class="navbar">
    <!-- 将checkbox移至此处，与#nav-list同级 -->
    <input type="checkbox" id="check" class="visually-hidden" />
    <ul id="nav-list">
      <li>
        <a href="#">HOME:-<i class="fa-solid fa-angle-down ficont"></i></a>
        <ul class="sub-child">
          <li><a href="#">COFFEE HOUSE</a></li>
          <li><a href="#">RESTAURANT</a></li>
        </ul>
      </li>
      <li><a href="#">ABOUT</a></li>
      <li>
        <a href="#">MENU:-<i class="fa-solid fa-angle-down ficont"></i></a>
        <ul class="sub-child">
          <li><a href="#">MENU COFFEE</a></li>
          <li><a href="#">MENU RESTAURANT</a></li>
        </ul>
      </li>
      <li>
        <a href="#">PAGES:-<i class="fa-solid fa-angle-down ficont"></i></a>
        <ul class="sub-child">
          <li><a href="#">SERVICE</a></li>
          <li><a href="#">RESERVATION</a></li>
          <li><a href="#">HISTORY</a></li>
          <li><a href="#">OUR CHEFS</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">FAQS</a></li>
        </ul>
      </li>
      <li>
        <a href="#">BLOG:-<i class="fa-solid fa-angle-down ficont"></i></a>
        <ul class="sub-child">
          <li><a href="#">BLOG GRID</a></li>
          <li><a href="#">BLOG STANDARD</a></li>
          <li><a href="#">BLOG SINGLE</a></li>
        </ul>
      </li>
      <li><a href="#">CONTACTS</a></li>
    </ul>
    <div id="hamcross">
      <div class="uno"></div>
      <div class="duo"></div>
    </div>
  </div>
</nav>

对应修改CSS代码

1. 更新checkbox的汉堡菜单样式选择器：

/* 替换原有的#check:checked~.uno/.duo */
#check:checked ~ #hamcross .duo {
  rotate    : -45deg;
  transform : translate(5px, -5px);
}
#check:checked ~ #hamcross .uno {
  rotate: 45deg;
  transform: translate(2px, 2px);
}

2. 媒体查询中同步更新选择器：

@media (max-width: 1000px) and (min-width: 100px) {
  /* ... 保留原有代码 ... */
  #check:checked ~ #hamcross .duo {
    rotate: -45deg;
    transform : translate(5px, -5px);
  }
  #check:checked ~ #hamcross .uno {
    rotate: 45deg;
    transform : translate(2px, 2px);
  }
  /* ... 保留原有代码 ... */
}

3. 优化移动端导航列表布局（可选）：

@media (max-width: 1000px) and (min-width: 100px) {
  #nav-list li {
    float: none; /* 取消浮动，改为垂直排列 */
    background-color: #090c0f;
    padding: 10px 0;
  }
}

方法二：使用CSS :has()选择器（无需修改DOM，现代浏览器支持） #

如果不想调整DOM结构，可通过:has()选择器选中包含勾选状态checkbox的#hamcross，再匹配同级的#nav-list：

修改CSS选择器

/* 替换原有的#check:checked~#nav-list */
#hamcross:has(#check:checked) + #nav-list {
  display  : block;
  position : absolute;
  z-index  : 9;
}

媒体查询中同步替换

@media (max-width: 1000px) and (min-width: 100px) {
  /* ... 保留原有代码 ... */
  #hamcross:has(#check:checked) + #nav-list {
    display : block;
  }
  /* ... 保留原有代码 ... */
}

注意：:has() 选择器支持Chrome 105+、Firefox 121+、Safari 15.4+，如需兼容旧浏览器建议使用方法一。

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