本文详解因复选框宽度设为0导致下拉菜单点击后瞬间关闭的Bug，通过将:checked状态下的input宽度设为1px而非0，确保事件冒泡链完整、焦点可维持，从而稳定展开下拉菜单。
本文详解因复选框宽度设为0导致下拉菜单点击后瞬间关闭的bug，通过将`:checked`状态下的`input`宽度设为`1px`而非`0`，确保事件冒泡链完整、焦点可维持，从而稳定展开下拉菜单。
在使用纯 CSS 实现汉堡菜单（Hamburger Menu）配合下拉导航时，一个常见却隐蔽的 Bug 是：菜单展开后立即消失——即用户点击汉堡图标，下拉项闪现一帧便关闭。根本原因往往不在 JavaScript（本例无 JS），而在于 CSS 中对 <input type="checkbox"> 的过度隐藏。
你当前的样式中存在关键问题：
.hamburger-menu input:checked {
opacity: 0;
width: 0; /* ⚠️ 危险操作：width: 0 会移除元素的渲染盒（rendering box） */
}虽然 opacity: 0 让复选框视觉上不可见，但 width: 0 会导致该 <input> 元素完全失去布局尺寸和交互热区。浏览器在点击后虽触发 :checked 状态，但由于元素宽高为 0，其绑定的 :has(input:checked) 选择器所依赖的“存在且可检测”前提被破坏；更严重的是，点击事件无法持续捕获或冒泡到父级 label，导致 checkbox 状态在下一帧被重置（尤其在某些浏览器中表现为“点击即取消”），下拉菜单随之坍缩。
✅ 正确做法是：保留最小可交互尺寸，仅视觉隐藏。将 width: 0 改为 width: 1px（或 width: 0.1px），并辅以 height: 1px 和 overflow: hidden，确保：
- 元素仍存在于文档流中，:has() 选择器稳定生效；
- 点击区域虽极小但仍存在，防止状态意外丢失；
- 视觉上完全不可见（配合 opacity: 0 和 position: absolute 等进一步隐藏亦可）。
修正后的关键 CSS 如下：
.hamburger-menu input:checked {
opacity: 0;
width: 1px; /* ✅ 替换 width: 0 */
height: 1px; /* ✅ 同时设置高度，避免塌陷 */
overflow: hidden;
}⚠️ 注意事项：
- 不要使用 display: none 或 visibility: hidden —— 它们会使 :has() 失效；
- 避免 pointer-events: none 应用于已勾选的 input（你当前未设，但需警惕）；
- 若下拉菜单由兄弟元素（如 .dropdown）通过 ~ 或 + 控制，请确认其与 input 在 DOM 中位置正确，且未被 z-index 或 transform 层叠上下文意外遮挡；
- 建议为 .hamburger-menu 添加 user-select: none，防止误选文字干扰交互。
总结：纯 CSS 导航菜单的稳定性高度依赖于表单控件的“存在感”。看似微小的 width: 0 修改，实则切断了状态维持的关键链路。记住口诀：“视觉隐藏靠 opacity，交互存在靠尺寸” —— 保留 1px 宽度，是让汉堡菜单真正“稳住”的黄金实践。
