子菜单飘到页面左上角是因为position: absolute找不到已定位祖先，必须为每级可展开的li显式设position: relative；若漏设，它将回溯至body定位，导致位置失控。
必须给父级 li 加 position: relative，否则子菜单会定位到 body 左上角——这是 90% 的人第一次写就失败的根源。
为什么子菜单总飘到页面左上角
因为 position: absolute 不认“直接父元素”，只找最近的「已定位祖先」。如果 li 没设 position: relative，它就一路往上找到 body，于是子菜单贴着视口定位。
- 每级可展开的容器（比如
.nav-item或li）都得显式加position: relative - 别只在最外层
ul上加——嵌套越深，漏一级就越容易出错 - 检查开发者工具里 computed styles 中的
position值，确认它真来自你预期的父级
top: 100% 为什么有时不准
top: 100% 表示“从父元素顶部起，向下移动等于父高的一段距离”，但它依赖父元素高度稳定。一旦父级有 padding、border 或文字换行，IE11 和部分旧版 Safari 就会把边框/内边距算进“100%”起点，导致下拉菜单下移几像素。
- 统一给所有参与定位的父级加
box-sizing: border-box - 避免在
li上设border；如需分隔线，改用margin-right或伪元素::after - 若父级内容动态（如多行文本、响应式字号），
top: 100%就不可靠，应改用top: calc(100% + 1px)或配合transform: translateY(1px)微调
移动端和 hover 失效怎么处理
手机没有 hover，纯 CSS 的 :hover 规则在触摸设备上基本无效；而且小屏下 position: absolute 容易被视口裁切。
- 在
@media (max-width: 768px)中，把子菜单position改为static或relative，让它回归文档流垂直展开 - 隐藏桌面端的
:hover显隐逻辑，改用 JS 绑定点击事件切换aria-expanded和is-open类 - 不要试图用
pointer: fine媒体查询“修复” hover —— 它在混合输入设备（如带触控笔的 Windows 笔记本）上行为不可靠
真正难的不是写出第一版下拉菜单，而是让 position: relative 不漏设、box-sizing 不遗漏、@media 断点不忘记——这些细节在合并代码或接手老项目时，最容易被当成“无关样式”删掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
