仅使用CSS实现的Hamburger菜单失效，勾选复选框无法控制菜单显隐

问题核心原因 #

你的代码存在三个明显问题，导致菜单无法跟随复选框状态切换：

1. CSS选择器匹配错误
   你写的input[type=checkbox]:checked .hamburger-menu规则，是匹配checkbox后代节点中的.hamburger-menu，但从HTML结构来看，.hamburger-menu是nav标签的同级兄弟节点，和checkbox不在同一个父子层级内，所以这个选择器永远匹配不到目标元素，样式自然不生效。
2. display属性不支持CSS动画
   你定义的@keyframes里用display做过渡是无效的，display不属于CSS可插值动画的属性范围，这段动画代码完全不会执行。
3. 未设置菜单默认隐藏样式
   你没有给.hamburger-menu设置默认隐藏的规则，所以菜单默认就处于显示状态，自然不会跟随复选框状态变化。

修正方案 #

方案1：直接切换显隐（无过渡动画，兼容性最好）

首先给菜单添加默认隐藏样式：

.hamburger-menu {
  display: none;
}

如果使用主流浏览器（均已支持:has选择器），直接修改匹配规则即可：

/* 匹配包含勾选状态复选框的nav，选中它后面的同级菜单节点 */
nav:has(input[type=checkbox]:checked) + .hamburger-menu {
  display: block;
}

如果需要兼容不支持:has选择器的旧版浏览器，可以调整HTML结构，把checkbox元素移到nav标签结束后、.hamburger-menu前面，原来的label标签for属性保留，点击依然可以触发复选框状态变化：

<!-- 调整后的HTML结构片段 -->
</nav>
<!-- end of navbar -->
<input class='checkbox' type="checkbox" id="checkbox">
<div class='hamburger-menu'>
  <!-- 原有菜单内容不变 -->
</div>

对应的CSS可以简化为：

.hamburger-menu {
  display: none;
}
input[type=checkbox]:checked + .hamburger-menu {
  display: block;
}

方案2：添加平滑过渡效果

如果想要0.3s的渐变显隐效果，不要用display切换，改用opacity、visibility和高度配合实现：

.hamburger-menu {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
/* 选择器和方案1保持一致即可，这里以调整HTML结构后的规则为例 */
input[type=checkbox]:checked + .hamburger-menu {
  opacity: 1;
  visibility: visible;
  max-height: 300px; /* 调整为你的菜单实际最大高度即可 */
}

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