子菜单被遮挡主因是z-index未生效，需确保父容器设position: relative、下拉菜单设position: absolute及background-color，且避免overflow: hidden；移动端须用JS替代:hover。
子菜单被遮挡，大概率是 z-index 没起作用
z-index 不是写上就生效的——它只对 position 值为 relative、absolute、fixed 或 sticky 的元素有效。如果父容器（比如 .navBar）没设 position，或者子菜单容器（比如 .dropdown）只是普通 div 且没定位，那再大的 z-index 都不会提升层级。
常见错误包括：
-
.navBar用了float: left却没加position: relative，导致其内部position: absolute的下拉菜单失去定位锚点，向上回溯到html或body，最终错位并被其他层覆盖 - 下拉菜单本身没设
background-color，看起来“被遮”，其实是透明叠加在下方文字上，内容混在一起看不清 - 父级或祖父级容器设置了
overflow: hidden，直接把超出部分（包括下拉菜单）裁掉
必须给下拉菜单的直接父项加 position: relative
这是最常漏掉的关键一步。CSS 的 position: absolute 是相对于最近的「已定位祖先元素」（即 position 不为 static）来计算位置的。如果没这个祖先，浏览器会一直往上找，直到 html，结果就是下拉菜单飘到页面左上角或盖在按钮上。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 把
.dropdown放进一个li或div内，而不是和导航项并列 - 给那个容器（比如
.nav-item）加上position: relative - 确保
.dropdown自身设了position: absolute和top: 100%（紧贴下方）
示例片段：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.nav-item {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
z-index: 1000;
}
scroll-padding-top 对下拉菜单无效，别乱套用
scroll-padding-top 是解决「锚点跳转后标题被固定导航栏遮住」的问题，和下拉菜单是否显示完全无关。它只影响浏览器滚动终点的偏移量，不参与任何渲染层叠逻辑。
如果你发现下拉菜单在点击某个链接跳转后突然消失或错位，不是 scroll-padding-top 没设对，而是：
- 跳转后页面重绘触发了 hover 状态丢失（hover 只对鼠标有效，不适用于触屏或键盘焦点）
- JS 控制的下拉菜单没做 focusin/focusout 兼容，导致键盘用户无法展开
- 媒体查询在小屏下关闭了 hover 效果，但没提供 click/tap 替代逻辑
移动端悬停失效？得换交互逻辑
纯 CSS 的 :hover 在 iOS 和 Android 大多数浏览器中不触发，或仅在第一次点击后临时生效。这意味着你写的 li:hover .dropdown { display: block; } 在手机上基本不可靠。
真正可用的方案是：
- 用 JS 监听
click或touchstart，切换.dropdown的show类 - 保留 hover 样式作为桌面端增强，但不依赖它实现核心功能
- 确保每个可展开项有
role="button"和aria-expanded，支持屏幕阅读器
容易被忽略的一点：如果用了 pointer-events: none 在父容器上（比如为了穿透点击），会直接让所有子元素失去 hover 和 click 响应，务必检查 computed styles 中是否意外继承了该属性。
