多级折叠菜单重叠：结构错位的三种形态

多级折叠菜单的子菜单跑到父容器外面，或者与同级菜单叠在一起，根因大多在结构，而不是样式数值。

形态一：子列表没有紧跟父项

<li>父项</li>
<ul>子菜单</ul>

子列表必须作为 li 的子节点，紧跟在父项文本之后。写成兄弟节点时，子菜单脱离父项的范围，定位与缩进都会跑偏。

形态二：details 不是直接嵌套

用 details 实现折叠时，子级 details 要作为父级内容的直接后代。中间隔了一层通用容器时，:has 或后代选择器的匹配范围会超出预期，多个层级同时开合。

形态三：:has 没限定层级

li:has(> ul) > a::after { content: ''; }

只写 li:has(ul) 时，孙级菜单的存在也会让祖父级命中。加上子代限定符，匹配范围收回到直接父子关系。

样式层的两个补充

• 不要用 flex 排列折叠层级，主轴排列会破坏缩进表达。
• 子菜单的定位以 li 为参照，给 li 设置相对定位，子菜单按需要绝对摆放。

检查顺序

1. 确认子列表是 li 的直接子节点。
2. 确认 details 嵌套为直接后代。
3. 确认 :has 的选择器限定了层级。
4. 确认没有用 flex 排列折叠层级。