top: 100% 更可靠是因为它使下拉菜单顶部精准对齐触发按钮底部，不依赖固定像素值，能自适应字体、缩放、padding和border变化；而top: 0会导致菜单覆盖按钮，top: 40px在高dpi或字体调整时易错位。
为什么 top: 100% 比 top: 0 或像素值更可靠
top: 100% 表示“子元素顶部对齐父元素底部”，它不依赖触发按钮的固定高度，能自动适应 font-size 变化、缩放、padding 或 border 增减。写死 top: 40px 在高 DPI 屏幕或用户调整浏览器字体时会错位；top: 0 则会让菜单叠在按钮上，不是“紧贴下方”。
必须给触发容器加 position: relative
下拉菜单用 position: absolute 时，它的定位参照是最近的已定位祖先元素。如果没显式设置，就会一路往上找到 ，导致菜单出现在页面左上角。常见错误是给 或 加了 position: relative，结果整个菜单锚定到视口根部。
- 只给直接包裹触发按钮的容器（比如
<li>或<div class="nav-item">）加 <code>position: relative - 用开发者工具检查该元素的
computed position和offsetParent，确认它确实是菜单的 offsetParent - 避免在有
overflow: hidden的父级上设position: relative，否则菜单会被裁剪 - 左对齐：直接写
left: 0，菜单左边缘与按钮左边缘对齐 - 水平居中：需 JavaScript 获取按钮
getBoundingClientRect()，再算left = rect.left + rect.width / 2 - menuWidth / 2 - 注意：
getBoundingClientRect()返回的是视口坐标，已自动处理页面滚动，无需再减window.pageXOffset - 真响应式下拉必须用 JavaScript 控制
display或visibility+aria-expanded - 若坚持用 CSS，至少加
@media (hover: hover) and (pointer: fine)限定 hover 仅在鼠标设备生效 - 别依赖
overflow: hidden来“隐藏”菜单——它会把position: absolute的菜单直接裁掉，而不是隐藏
left 定位选左对齐还是居中？看业务场景
左对齐（left: 0）最常用，语义清晰且兼容性好；居中需要动态计算，适合按钮宽度不一但要求视觉平衡的导航栏。
移动端和 hover 失效怎么办
CSS :hover 在触摸设备上不可靠——第一次点击触发，第二次才隐藏，体验断裂。纯 CSS 方案在此场景下本质失效。
实际开发中，最容易被忽略的是 overflow 和 offsetParent 的隐式影响：一个没注意的 overflow: hidden 父容器，或者错误的定位上下文层级，会让菜单突然消失或偏移几十像素，而控制台里几乎看不出异常。
