导航栏下拉菜单需父元素设position: relative、子菜单用position: absolute并配top: 100%和left: 0，通过.nav-item:hover控制显隐；须消除悬停间隙、兼顾触屏与键盘可访问性。
导航栏 hover 触发下拉菜单的基本结构
核心在于父容器用 position: relative，子菜单用 position: absolute 定位，并通过父元素的 :hover 控制子菜单显隐。不加 relative 的父级，absolute 会向上逐层找最近的定位上下文，极大概率脱离导航栏位置。
- 导航项（
<li>）必须设为position: relative，否则下拉菜单无法以它为基准定位 - 下拉菜单（
<ul class="dropdown-menu"></ul>）默认display: none，:hover时改为display: block或用opacity+visibility实现过渡 - 避免对
<a></a>标签直接写:hover来显示下拉——它没有子元素上下文，应作用于包裹它的<li>
常见错位：下拉菜单没出现在导航项正下方
这是 position: absolute 没配对 top / left 导致的。绝对定位元素默认按 top: 0; left: 0 贴父容器左上角，而导航项通常有内边距或行高，视觉上就“飘”了。
- 给下拉菜单加
top: 100%，让它紧贴父<li>底边（比写死top: 40px更健壮） - 用
left: 0对齐左侧；若需右对齐下拉（如最右侧菜单），改用right: 0 - 如果父
<li>有border或padding，检查是否影响了100%计算——此时可微调top: calc(100% + 1px)
.nav-item {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.nav-item:hover .dropdown-menu {
display: block;
}
悬停穿透与鼠标移入间隙问题
当导航项和下拉菜单之间有空隙（比如 margin、gap 或未清除的默认间距），鼠标移出瞬间菜单消失，导致「闪退」，根本点不到下拉项。
- 把下拉菜单的
top改成略小于100%（如99%）或加负margin-top（如margin-top: -2px），物理缝合间隙 - 确保父
<li>和子<ul></ul>在 DOM 中相邻，中间不要插<div> 或换行符引起的空白节点（尤其用 JS 动态插入时） <li>不要依赖 <code>transition: opacity单独控制显隐——opacity: 0仍占布局空间且能响应 hover；必须配合visibility: hidden和display: none - 若需兼容触屏，必须引入 JS 监听
click或用details/summary语义化替代 - 仅靠
:hover的下拉菜单对键盘用户不友好（TAB无法聚焦下拉项），WCAG 要求提供键盘可操作路径 - 别用
pointer-events: none试图“修复”动画卡顿——它会让下拉菜单完全不可交互
移动端适配与可访问性提醒
:hover 在触摸设备上不可靠，纯 CSS 下拉在 iOS/Android 上基本失效。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
position 值、漏一行 top: 100%，或者没处理好 hover 间隙，就会整块失效。真正稳定的方案，往往是在 relative + absolute + display 这三者之间反复校准像素和触发逻辑。
