当 CSS 水平下拉菜单在悬停时被下方 遮盖，根本原因是父容器（如 header）设置了 overflow: hidden，导致绝对定位的子菜单被裁剪；解决关键在于移除或调整溢出控制，并合理设置层级与布局模式。
当 css 水平下拉菜单在悬停时被下方 `
这个问题看似是“z-index 层级不够”，实则根源在于 header { overflow: hidden } ——它会强制裁剪所有超出其边界的内容，包括 position: absolute 的下拉菜单（即使设置了高 z-index），使其视觉上“消失”或“被压在后面”。
✅ 正确解法：移除 overflow: hidden 并改用现代布局
原代码中 header { overflow: hidden } 是为清除浮动（float: left）而设的传统 hack，但在现代 CSS 中已完全可被更可靠、语义清晰的方式替代：
header {
display: flex; /* 启用 Flex 布局，自然清除浮动 */
width: 80%;
background-color: black;
margin-inline: auto; /* 现代写法，等价于 margin-left/right: auto */
padding: 10px;
/* ❌ 删除 overflow: hidden */
}
#navMenu {
margin: 0;
padding: 0;
width: 100%; /* 推荐设为 100%，避免宽度计算误差 */
}
#navMenu ul {
margin: 0;
padding: 0;
list-style: none;
display: flex; /* 替代 float，更可控 */
}
#navMenu li {
position: relative;
}
#navMenu > ul > li {
margin-right: 8px; /* 可选：添加项间距 */
}
#navMenu a {
display: block;
text-align: center;
text-decoration: none;
color: white;
height: 30px;
line-height: 30px; /* 垂直居中更稳妥 */
padding: 0 15px;
width: 150px;
}
/* 下拉菜单：确保脱离文档流且层级足够 */
#navMenu ul ul {
position: absolute;
top: 100%; /* 紧贴父项底部 */
left: 0;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all 0.2s ease;
background-color: #333;
min-width: 150px;
z-index: 1000; /* 显式声明高堆叠顺序，防意外覆盖 */
}
#navMenu ul li:hover > ul {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
⚠️ 关键注意事项
-
z-index仅对定位元素生效：确保下拉菜单（ul ul）有position: absolute，且父li有position: relative（你已正确设置）。 -
避免
overflow: hidden在导航容器上：它会截断绝对定位的下拉层，是本问题的罪魁祸首。 -
推荐使用
display: flex替代float：更简洁、无清除浮动副作用，且天然支持响应式对齐。 -
<section></section>不需要额外z-index：只要菜单的z-index足够高（如1000），且其祖先没有创建新的层叠上下文（如opacity 或 <code>transform等），就能自然覆盖后续元素。
✅ 补充：若需兼容旧浏览器（如 IE11）
仍想保留 float 清除，可用伪元素方案替代 overflow: hidden：
#navMenu::after {
content: "";
display: table;
clear: both;
}
这样既维持了浮动布局，又彻底规避了 overflow: hidden 对下拉菜单的裁剪风险。
通过以上调整，你的水平下拉菜单将稳定悬浮于 <section></section> 之上，交互体验清晰可靠——核心不是“加 z-index”，而是“解除父容器的视觉封锁”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
