### [多级折叠菜单重叠：结构错位的三种形态](https://www.huociguo.com/article/1704)

**Published:** 2026-10-02T04:30:10

**Author:** 米了

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

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

![键盘按键](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-7789852.jpeg)

折叠菜单的重叠问题先从结构查起

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

```
<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 排列折叠层级。

**Tags:** :has选择器, details标签, 多级菜单, 折叠菜单, 菜单嵌套

**Categories:** HTML5

---