嵌套下拉菜单显示异常：Saturn子菜单遮挡标签问题求助

根因分析 #

你的CSS规则存在优先级冲突：

• 你预先给二级下拉菜单设置了nav ul ul { position: static; }，期望子菜单在父标签下方的正常文档流中展开
• 但后续的[id^=btn]:checked+ul选择器优先级更高，会匹配所有id以btn开头的复选框对应的ul元素，将其强制设置为position: absolute，导致二级菜单脱离文档流，最终遮挡了Saturn标签。

修复步骤 #

仅需修改1行CSS代码即可：
将原代码中匹配所有btn开头复选框的选择器：

[id^=btn]:checked+ul {
  display: block;
  position: absolute;
  background: white;
}

修改为仅匹配一级菜单复选框的选择器：

#btn:checked+ul {
  display: block;
  position: absolute;
  background: white;
}

验证效果 #

修改后二级菜单会保持static定位，在对应父标签（venus/Saturn）的下方正常展开，不会出现遮挡问题，两个一级选项的子菜单展开行为完全一致。

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