下拉菜单需父容器设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 脱离文档流，紧贴父项下方展开。常见需求是“左对齐”或“右对齐”：
都来订网络外卖订餐系统
下载
都来订网络外卖订餐系统致力于帮助专业从事餐饮外卖企业或有外卖业务的餐饮企业快速部署外卖订餐系统，拓展网络外卖订餐业务。简洁大方的界面、精准的楼宇定位系统、强大的菜单管理系统，人性化的订单处理系统等等，不仅能够帮助您提升企业形象、还为您提供了一套完整的网络外卖解决方案，配合适当的宣传方式可以获得实实在在的销量和用户黏度的提升。都来订网络外卖订餐系统区别于同类软件产品的独特性表现在：1、 简洁大方的界
立即学习“前端免费学习笔记（深入）”；
- 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 等都会）
