多级下拉菜单需用嵌套构建语义化结构，每级可展开项设position: relative，子菜单用position: absolute精确定位；隐藏用opacity:0;visibility:hidden;pointer-events:none三属性组合；移动端结合focus-within与轻量JS控制开关。
用嵌套
多级下拉菜单的底层布局不是靠 div 堆砌，而是靠标准列表嵌套表达父子关系。浏览器和屏幕阅读器只认 、 再包
常见错误是把子菜单写成兄弟节点（比如
- 每个可展开项必须是
，内部包裹文字和子 - 子
的直接子元素，不能隔层或平级 - 避免在
position: relative和position: absolute的定位组合必须配对使用纯靠
display: none/block切换显示，会导致菜单弹出时页面跳动、遮挡其他内容、定位偏移。真正稳定的定位依赖父级设position: relative，子级用position: absolute锚定位置。容易踩的坑是只给最外层
relative，而忘了每一级可展开的都要设——否则二级菜单会相对于 body 定位，三级菜单又相对于一级菜单错位，越深偏得越离谱。- 一级菜单项：
设position: relative，为二级菜单提供定位上下文 - 二级菜单
：设position: absolute; top: 100%; left: 0 - 三级及以上菜单：统一设
left: 0; top: 0，避免left: 100%在多层嵌套中累积偏移
隐藏逻辑别只用
display: none，要用三属性组合用
display: none隐藏菜单，动画过渡会失效，而且切换瞬间会触发重排（reflow），导致闪屏或布局抖动。更稳妥的做法是用opacity: 0; visibility: hidden; pointer-events: none组合。这个组合不是为了炫技，而是解决实际问题：保持 DOM 占位（不触发重排）、支持 CSS transition、阻止误点穿透（比如鼠标滑过隐藏菜单区域却点中了后面的按钮）。
- 必须同时设置三个属性，缺一不可；单设
visibility: hidden仍响应鼠标事件，单设opacity: 0仍可点击 - 显示时对应设为
opacity: 1; visibility: visible; pointer-events: auto - transition 推荐加在
opacity上，比height或transform更稳定，尤其在子菜单高度不固定时
移动端悬停失效？
:hover不是万能的，但 JS 不该是第一选择在 touch 设备上，
:hover行为不可靠：第一次 tap 触发 hover，第二次才真正跳转，体验割裂。但立刻上 JS 监听touchstart又容易误触——手指刚落就展开，滑动页面时菜单乱弹。真正实用的解法是用媒体查询 +
focus-within+ 少量 JS 回退：桌面端走li:hover > ul，移动端默认收起，仅当用户 tap 某个li.has-submenu时，给它加临时 class（如is-open），再用.is-open > .submenu控制显示。这样既避免误触，又保留键盘焦点导航能力。- 不要监听
touchend——延迟高，用户松手才响应，感知卡顿 - 加
tabindex="0"到可展开的，确保键盘用户能用 Tab 进入、Enter 展开 - JS 只负责开关状态，样式控制全部留在 CSS 里，便于维护和动画复用
关键点在于：HTML 结构决定能否嵌套，CSS 定位决定是否稳，隐藏方式决定是否顺，交互逻辑决定是否可用。四者漏掉任一环，多级菜单就会在某个设备、某次交互、某个辅助工具中突然失灵。
- 一级菜单项：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
