下拉菜单问题根源是:hover触发区与菜单间存在空隙导致闪退；浮动布局引发父容器塌陷使菜单悬空；IE8–11存在absolute定位bug；移动端hover不可靠；键盘及无障碍支持缺失。
hover时下拉菜单闪退、点不中
根本原因是 :hover 触发区域和下拉菜单之间有空隙，鼠标移过去瞬间脱离触发态，菜单立刻隐藏。浮动布局下尤其常见——float 会让父容器高度塌陷，导致下拉项实际悬在“看不见的空中”，视觉上连不上。
实操建议：
- 给导航项的 li 加 position: relative，确保下拉 ul 的定位基准正确
- 下拉 ul 用 position: absolute，并设 top: 100%（不是 top: 0）
- 关键：给 li 的 :hover 同时控制自身和子 ul 显示，且中间不能留白——比如把 a 的 padding-bottom 加大，或给 li 设 margin-bottom: -1px 补齐间隙
- 避免用 display: none/block 切换，改用 visibility: hidden/visible + opacity 过渡，能减少重排，也更稳
IE8–IE11里下拉不显示或错位
老版本 IE 对 position: absolute 在浮动父元素内的计算有 bug，尤其当父 li 是 float: left 时，子 ul 容易偏左或消失。
实操建议：
- 确保父 li 有明确宽度（哪怕 width: auto），避免 IE 自行坍缩
- 给下拉 ul 加 left: 0，强制对齐左边缘
- 若仍错位，尝试给父 li 加 zoom: 1 或 *display: inline 触发 hasLayout
- 不要依赖 transform 做位移，IE9以下不支持，会直接失效
移动端点击无反应、菜单不收起
纯 :hover 在触摸设备上不可靠：iOS Safari 只在第一次点击时触发 hover，之后就失效；Android 多数浏览器压根不模拟 hover。
实操建议：
- 必须加 JS 控制：监听 click，切换类名如 is-open，CSS 用 .nav li.is-open > ul 显示菜单
- 点击其他区域时收起菜单，用 document.addEventListener('click', ...)，但注意排除导航自身事件（e.target.closest('.nav') 判断）
- 不要用 ontouchstart 单独处理，兼容性差，且和 click 冲突
- 移动端别做复杂动画，max-height + overflow: hidden 过渡比 height 更安全
键盘无法操作、无障碍支持差
只靠 :hover 和 click，屏幕阅读器用户和键盘党完全无法展开二级菜单，违反基本可访问性要求。
实操建议：
- 导航链接用 a 标签，不是 div 或 span，保证天然可聚焦
- 为有子菜单的 a 加 aria-haspopup="true" 和 aria-expanded="false"
- JS 中点击时同步更新 aria-expanded 值
- 支持 Enter 和 Space 键展开，Escape 键收起，焦点管理要跟上（展开后自动 focus() 到第一个子项）
- 别用 pointer-events: none 挡键盘焦点，这是最常被忽略的坑
浮动布局本身正在被淘汰，但存量项目还得修。真正难的不是让菜单“掉下来”，而是让它在各种尺寸、输入方式、辅助技术下都“稳得住”。hover 间隙、IE 定位、触控延迟、焦点丢失——每个都是单独卡点，修一个容易漏一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
