必须用 relative 定位父容器，再用 absolute 定位子菜单；否则子菜单会因缺少定位上下文而相对 html 定位，导致位置错乱。
下拉菜单的 position 值该选 absolute 还是 relative？
必须用 relative 定位父容器，再用 absolute 定位子菜单。否则菜单会脱离文档流后找不到参照点，直接飞到页面左上角。
常见错误是只给菜单本身设 position: absolute，却没给它的直接父元素（比如 <li>）设 position: relative。浏览器会一直往上找最近的已定位祖先，找不到就回退到 ，导致位置错乱。
- 父级
<li class="dropdown">必须加position: relative - 子菜单
<ul class="dropdown-menu"></ul>设position: absolute - 避免对
或<header></header>随意加position: relative，会干扰定位链
如何让下拉菜单自动贴着触发元素底部对齐？
靠 top: 100%，不是 top: 0 或像素值。它表示“顶部紧贴父元素底部”，能自适应不同高度的触发项。
如果触发元素有 padding 或 border，top: 100% 仍能准确对齐；而写死 top: 40px 会导致在缩放或字体变化时错位。
-
top: 100%是最可靠的高度无关方案 - 水平对齐用
left: 0（左对齐）或right: 0（右对齐），避免用margin-left模拟 - 若需轻微偏移（如避开边框），改用
top: calc(100% + 1px)，别用margin-top
悬停时菜单闪动、无法点击怎么办？
本质是鼠标移出触发区域和菜单之间存在空隙，导致 :hover 状态中断。这不是 CSS 动画问题，而是布局间隙问题。
解决方案只有两个：补空隙，或扩大热区。推荐前者，更可控。
- 给父
<li>加padding-bottom: 8px，同时给菜单加margin-top: -8px，视觉无缝，逻辑连通 - 或者用
gap配合display: flex布局，但需注意旧浏览器兼容性 - 绝对不要依赖
transition-delay来“等鼠标移过去”，延迟不可控，移动端失效
移动端点击展开后，如何防止滚动时菜单意外关闭？
CSS :hover 在触摸设备上行为不一致——有些系统模拟一次 hover，有些不触发，有些在点击后立刻消失。纯 CSS 实现不了稳定展开/收起。
必须用 JavaScript 控制类名（如 is-open），并监听 click 和 touchstart，同时为菜单添加 focusout 处理失焦收起。
- 仅靠
:hover的下拉菜单，在 iPad Safari 和 Android Chrome 上大概率点一下就关 - 关键 JS 逻辑：点击触发项时切换
is-open类；点击外部区域时移除该类 - 记得给菜单加
tabindex="-1"，否则键盘用户无法用Esc关闭
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
