下拉菜单需父容器设position: relative作为定位基准，子菜单用absolute并设left: 0; top: 100%对齐，避免间隙导致闪烁，注意z-index层级与层叠上下文影响。
下拉菜单的核心在于 父容器相对定位（position: relative），子菜单绝对定位（position: absolute）并隐藏，再通过 hover 或 JS 触发显示。关键不是“怎么写”，而是“为什么这样写才不掉、不偏、不遮挡”。
父元素必须设为 relative
这是整个下拉逻辑的基石。absolute 子元素的定位参考点，默认是最近的已定位祖先（即 position 值为 relative/absolute/fixed/sticky 的祖先）。如果父级没设 relative，浏览器会一路向上找，很可能落到 body 上，导致下拉项飘到页面左上角或错位。
正确写法：
- .nav-item { position: relative; } —— 给每个可展开的菜单项加
- 不写 width 或 left/top 不影响定位参考，只起“锚点”作用
- 避免对父元素同时设 overflow: hidden，否则可能裁剪出框的下拉内容
子菜单用 absolute + 左右对齐控制
子菜单（ul.dropdown-menu）默认用 absolute 脱离文档流，紧贴父项下方展开。常见需求是“左对齐”或“右对齐”：
立即学习“前端免费学习笔记（深入）”；
- left: 0; top: 100%; —— 左边缘对齐父项，顶部紧贴父项底部
- right: 0; top: 100%; —— 右边缘对齐父项（适合导航栏靠右时）
- 慎用 transform: translateX() 微调，优先用 left/right 控制基准位置
hover 显示要防闪烁 & 支持键盘访问
纯 CSS 下拉常用 :hover，但鼠标从父项移向子菜单途中若存在间隙，会触发 mouseout 导致菜单闪退。
- 在父项和子菜单之间留 不超过 10px 的垂直间距，或用 margin-top 负值“粘连”它们
- 更稳妥：给父项设置 padding-bottom: 10px，子菜单设 margin-top: -10px，视觉无缝，交互不断连
- 仅靠 hover 不满足无障碍要求，生产环境建议配合 JS 实现 focus/blur 支持键盘 Tab 展开
层级与遮挡问题：z-index 不是万能解
下拉菜单常被轮播图、固定头部、模态框盖住，光加 z-index 不一定生效。
- 确保父容器（.nav-item）有 z-index，且其父级（如 .header）没有更低的 z-index 或 transform 属性（后者会创建新层叠上下文）
- 子菜单的 z-index 值需高于它所有同级层叠上下文的祖先容器
- 遇到“设了 z-index 还被盖”？检查是否触发了新的层叠上下文（transform、opacity、filter、will-change 等都会）
