多级折叠菜单重叠主因是html结构或css层级问题：ul嵌套错位、:has()未限定层级、details非直接子元素均会导致子菜单脱离父容器。正确做法是ul紧跟对应li、details直系嵌套、:has()精准匹配直系关系，并避免flex破坏缩进、margin偏移热区等问题。
多级折叠菜单重叠，根本不是样式没调好，而是 HTML 结构或 CSS 选择器没压住层级关系——ul 嵌套错位、:has() 写漏、details 子元素位置不对，都会让子菜单“浮”在父容器外，盖住下面内容。
用 ul 嵌套时，子菜单必须紧跟对应 li 后面
浏览器和屏幕阅读器靠 DOM 顺序识别父子关系。如果把子 ul 放到父 li 外面、或者用 div 包一层再塞 ul，键盘 Tab 就跳不过去，展开后也容易重叠。
- ✅ 正确写法：
<li> <a>产品</a><ul class="nested"><li><a>Web</a></li></ul> </li> - ❌ 错误写法：
<li><a>产品</a></li> <div><ul>...</ul></div>（子菜单脱离li，语义断裂） - 别给顶层
<ul></ul>设display: flex——它会破坏列表默认缩进逻辑，导致padding-left失效，子菜单横向挤出、覆盖相邻区块
details 嵌套必须满足“直接子元素”约束
Safari 对嵌套 details 的解析极严格：内层 details 必须是外层 details 的**直接子元素**，且 summary 必须是第一个子节点。否则子菜单不响应点击，视觉上就“悬空”在父内容下方，造成重叠假象。
- ✅ 正确位置：
<details><summary>一级</summary><p>描述</p> <details><summary>二级</summary></details></details> - ❌ 错误位置：
<details><summary>一级</summary><div><details>...</details></div></details>（div阻断了嵌套链路） - 每个
details的内容区（即summary后面的兄弟元素）必须加唯一id，并在summary上手动写aria-controls，否则 NVDA 读不出控制关系，用户可能反复点却无反馈，误以为“卡住重叠”
用 :has() 控制显示时，别漏掉层级限定
写 .menu-item:has(> .nested).active > .nested 是为了只展开当前项的直系子菜单；如果只写 .active .nested，所有深层子菜单会一起弹出，内容纵向堆叠、互相挤压，看起来就是重叠。
- ⚠️ Safari 和 Chrome 已支持
:has()，但 IE 完全不支持——需降级：给有子菜单的li加class="has-submenu"，CSS 写.has-submenu.active > .nested - 别用
margin-left实现缩进——它会让summary或a的点击热区偏移，用户点边缘区域无效，误操作后强行刷新页面，加剧布局错乱感 - 动画别用
transform: rotate()切换图标，文字会轻微抖动，叠加多层后视觉更混乱；改用opacity+transform: scale(0.9)更稳
真正难的不是让菜单“动起来”，而是确保每层展开后，它的高度能真实撑开父容器、不裁剪、不覆盖——这取决于 ul 是否嵌套正确、details 是否直系嵌套、:has() 是否精准限定层级，而不是过渡时间设多长或图标转多顺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
