纯CSS导航栏核心在于结构与样式配对：父容器必须设position: relative以锚定下拉菜单；下拉内容默认display: none，hover时用.display: block触发；水平布局推荐flex或float避免空白间隙；固定顶部需top: 0与z-index协同。
纯 CSS 实现的导航栏，只要结构清晰、定位合理，根本不需要 JS 就能完成 hover 展开、水平对齐、响应式基础适配这些核心功能。关键不在“怎么写”，而在“怎么组织结构”和“哪些样式必须配对出现”。
导航栏容器必须用 position: relative
所有下拉菜单（.dropdown-content）都依赖父级的 position: relative 来锚定位置。如果漏掉这句，下拉内容会脱离按钮、飘到页面左上角或文档流末端。
-
.dropdown必须设position: relative，不能只靠display: inline-block代替 - 若父容器是
flex或grid布局，也要确保该导航项本身有position: relative - 移动端点击展开时，这个定位关系同样影响
focus或:focus-within的行为
:hover 触发下拉必须配合 display: none/block
用 visibility: hidden/visible 或 opacity: 0/1 都不行——前者仍占布局空间，后者无法阻止鼠标穿透。只有 display 切换才能真正“移入/移出文档流”。
- 默认状态必须是
.dropdown-content { display: none; } - 触发规则必须写成
.dropdown:hover .dropdown-content { display: block; }，不能省略中间的空格（否则变成子元素 hover 才生效） - 如果导航项用了
flex布局，注意display: block会破坏 flex item 的排列，此时建议改用visibility+pointer-events: none组合
水平导航项之间留白要小心 font-size: 0 的副作用
当用 display: inline-block 排列 li 时，HTML 换行符会产生约 4px 的空白间隙。很多人直接给父 ul 设 font-size: 0，但这样会导致子元素里所有文字消失——除非你显式重置每个 a 的 font-size。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法：父
ul设font-size: 0，然后li a { font-size: 14px; } - 或者放弃
inline-block，改用float: left+clearfix，兼容性更好，且无空白问题 - 现代方案可用
display: flex，但要注意 IE11 对flex子项min-width的 bug，下拉菜单可能被截断
固定顶部导航栏时，z-index 和 top: 0 缺一不可
只加 position: fixed 不够，没设 top: 0 会卡在文档流原来位置；不设 z-index，下拉菜单会被后续内容遮盖（尤其滚动后）。
-
.top-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }是最小安全配置 -
z-index值别硬写 999，按层级逻辑来：导航栏 > 下拉菜单 > 主内容 > 弹窗遮罩 > 弹窗主体 - 如果页面用了 CSS-in-JS 或 Shadow DOM，
z-index可能被隔离，需检查实际渲染层叠上下文
最常被忽略的是：下拉菜单的 min-width 和父项宽度不一致时，鼠标移出按钮瞬间菜单就消失了——因为移入菜单区域前有一段“空白间隙”。解决它需要补全 top 和 left 的像素值，或者用 transform: translateY 微调位置，而不是只依赖 position: absolute 的默认偏移。
