下拉菜单偏移或悬空的根本原因是 position: absolute 的定位基准未对齐触发按钮；必须为直接包裹触发器和下拉内容的父容器（.dropdown）设置 position: relative，使 top: 100% 等值有参照，否则菜单将相对于 body 定位而错位。
下拉菜单为什么总是偏移或悬空
根本原因是 position: absolute 的定位基准没对齐触发按钮。默认情况下，absolute 元素会相对于最近的已定位祖先（即 position 不是 static 的父级）定位；如果没设，就退到 <body>，导致菜单飘在页面左上角或错位。
必须给父容器加 position: relative
这是最关键的一步，不是可选——没有它，top/left 就失去参照系。
-
.dropdown必须是包裹触发器（如<button>或<li>）和下拉内容（.dropdown-content）的直接父级 - 这个父级必须显式声明
position: relative，哪怕它本身不需要定位 - 不要指望
display: inline-block或flex自动提供定位上下文——它们不会
top: 100% 比 top: 0 更可靠
用 top: 0 容易让菜单盖住按钮；而 top: 100% 表示“紧贴父容器底部下方”，天然贴合，且不依赖按钮高度固定。
- 配合
left: 0可实现左对齐贴边；若需居中，用left: 50%+transform: translateX(-50%) - 避免写死
top: 40px这类值——按钮 padding、font-size 变了就错位 - 如果触发器是
<li>，确保其父<ul>没有意外的padding或margin干扰定位起点
移动端 hover 失效时定位仍要保留
iOS 和部分 Android 浏览器对 :hover 支持不稳定，但定位逻辑不能因此妥协——否则 JS 切换显隐时菜单依然会错位。
立即学习“前端免费学习笔记（深入）”；
- 定位样式（
position、top、left）和显隐控制（display或visibility）必须解耦 - 即使改用
click触发，也要保持.dropdown有position: relative，.dropdown-content有position: absolute和top: 100% - 别为了“适配移动端”删掉
relative——那只会让 JS 版本也出问题
top: 100% 锚定到底边。漏掉任何一环，菜单就会飘。 
