下拉菜单需父容器设 position: relative 且 box-sizing: border-box，用 top: 100% 和 width: 100% 实现自适应定位；箭头居中用 transform: translatex(-50%) 确保水平对齐。
父容器必须设 position: relative
绝对定位的下拉菜单不会自动“粘”在触发按钮下方，它只认最近一个设置了 position: relative、absolute、fixed 或 sticky 的祖先元素。如果漏掉这步，菜单会一路向上找，最终相对于 body 定位，位置完全失控。
常见错误：给整个导航栏（如 .nav）加 position: relative，结果所有子菜单都以导航栏左上角为原点；正确做法是给每个触发项（如 .nav-item 或 li）单独加 position: relative。
- 检查开发者工具里该元素的
offsetParent，确认是不是你预期的那个父级 - 避免在
html或body上误加position: relative，否则全站定位基准被污染 - 如果用 Flexbox 布局导航项，
position: relative可直接加在li或a上，不影响 flex 行为
width: 100% 要配合 box-sizing: border-box
下拉菜单设 width: 100% 本意是“和触发按钮一样宽”，但若父容器有 padding 或 border，而没设 box-sizing: border-box，实际宽度会变成 100% + padding + border，导致菜单溢出或错位。
- 所有参与定位的父级（尤其是
.nav-item）都应统一加box-sizing: border-box - 别把
padding写在.nav-item上，改到内部a标签里，避免干扰定位起点 - 如果触发按钮是
button或a且宽度不固定（比如文字长度变化），width: 100%才真正生效；若父级写了固定width，子菜单就只能继承那个死值
用 top: 100% 替代 top: 0 或具体像素值
top: 100% 是让下拉菜单紧贴触发项底部最稳妥的方式，它不依赖字体大小、行高或内边距的具体数值，天然适配动态内容和响应式缩放。
- 不要写
top: 40px这类固定值——换字体、缩放页面、切换系统字号时立刻失效 - 如果触发项有
border-bottom，IE11 会把它算进 “100%” 起点，造成几像素下移；此时必须确保父级已设box-sizing: border-box - 移动端小屏下，
top: 100%可能导致菜单被视口裁切，需在@media (max-width: 768px)中改用position: static或配合 JS 动态计算top
箭头居中要用 transform: translateX(-50%)
带三角箭头的下拉菜单，常因触发器宽度不固定而偏移。靠写死 left: 20px 或 left: 50% 都不可靠。
- 箭头伪元素（如
::before）应设top: 100%+left: 50%+transform: translateX(-50%) - 这个组合确保箭头中心始终对齐触发器水平中点，哪怕按钮文字从 “首页” 变成 “关于我们”
- 如果触发器本身用了
transform（如缩放动画），箭头也要同步加transform-origin，否则锚点会漂移
自适应宽度的核心不是“让菜单变宽”，而是让它的定位基准、尺寸计算和视觉锚点全部脱离具体像素依赖。一旦父级 position、box-sizing 和 top 值都选对了，width: 100% 才真正可预测；而箭头偏移这种细节，往往在滚动、缩放或国际化文本出现后才暴露——别等上线再查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
