用 data-level 属性标记层级，padding-left 替代 margin-left 实现缩进，父级设 position: relative，::after 伪元素消除 hover 间隙，top: calc(100% + 1px)，transition 明确属性，body.menu-open 控制滚动穿透，ie11 降级为 block 布局。
怎么让递归生成的多级菜单真正垂直对齐且不塌陷
递归渲染的菜单常出现子菜单错位、层级缩进失效、hover 区域不连续等问题，根本原因是 CSS 没有绑定到 DOM 的嵌套深度逻辑上，而是依赖静态类名或固定层级选择器。浏览器不会因为 HTML 是递归生成的，就自动理解“第 3 层子菜单要左偏移 40px”——这得你明确定义。
实操建议：
- 用
data-level属性在递归时显式标记层级（如<ul data-level="2"></ul>），比靠.menu ul ul ul这种选择器更可控、可读、易调试 - 避免用
margin-left实现缩进：它会破坏box-sizing: border-box下的宽度计算，且 hover 点击热区变窄；改用padding-left配合position: relative定位子菜单容器 - 子菜单默认
display: none，但必须确保父级position: relative，否则absolute子菜单会相对 body 定位，脱离上下文
hover 展开时子菜单闪退或触发不了的 CSS 原因
这不是 JS 事件没绑好，大概率是 CSS 中 hover 触发区域和子菜单之间存在「间隙」，鼠标移过去瞬间失去 hover 状态，导致 display: none 立刻生效。
常见错误现象：ul li:hover > ul 能显示，但鼠标一动就消失；或者子菜单从顶部滑出，但底部刚露出来就收回去。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 在父
li和子ul之间加一个透明连接块：用::after伪元素撑开垂直间距，高度至少 10px，content: ""+position: absolute+top: 100% - 子菜单
ul的top不要用100%硬卡，改用top: calc(100% + 1px)，避免像素四舍五入导致的 1px 断连 - 禁用
transition: all：它会让display变化被忽略，改用明确属性如transition: opacity 0.2s, visibility 0.2s
移动端点击展开菜单时，CSS 如何避免重绘抖动和滚动穿透
纯 hover 在移动端无效，改用 :focus-within 或 JS 切换 class 是主流做法，但容易引发两个问题：页面轻微上跳（focus 触发滚动锚定）、背景内容仍可滚动（滚动穿透）。
使用场景：折叠菜单需要适配 iOS Safari 和 Android Chrome，且不能依赖第三方库。
实操建议：
- 给菜单根容器加
touch-action: manipulation，减少点击延迟，同时防止误触触发双击缩放 - 展开时给
动态加class="menu-open"，配合body.menu-open { overflow: hidden; }，比 JS 操作scrollTop更稳定 - 子菜单用
transform: scaleY(0)+transform-origin: top控制展开动画，避免 height 动画触发重排（reflow）
IE11 兼容下递归菜单的 display: flex 布局失效怎么办
IE11 对 flex 嵌套支持差，尤其当递归层级超过 2 层时，flex-direction: column 在子 ul 中可能完全不生效，菜单变成水平堆叠。
性能影响：强行用 float 或 inline-block 修复会导致子菜单宽度计算异常，且无法响应式收缩。
实操建议：
- 放弃在 IE11 中对子菜单做 flex 布局，统一用
display: block+width: 100%，靠padding-left和position: absolute控制位置 - 用
@supports (display: flex)包裹现代写法，IE11 自动降级到 fallback 样式块 - 避免在递归结构中使用
gap或align-items: stretch—— IE11 不识别，且无 polyfill 补救方案
最麻烦的不是写多少层 ul 样式，而是每层的 position 上下文是否干净、z-index 是否被意外截断、以及移动端 focus 状态是否被 input 失焦打断。这些细节不验证到真机，光看桌面 Chrome 开发者工具是看不出问题的。
