二级菜单的 position: absolute 应相对于其直接父级一级菜单项（）定位，因此必须将该 设为 position: relative；若未设置，二级菜单会向上查找定位上下文，常错位至页面左上角。
二级菜单的 position: absolute 该相对于谁定位？
必须把一级菜单项（通常是 <li>）设为 position: relative，否则二级菜单会向上逐层找最近的定位上下文，大概率跑到页面左上角或 body 边缘。浏览器默认不把 <ul></ul> 或 <nav></nav> 当作定位参考，这点极易忽略。
常见错误是只给二级 <ul></ul> 加 position: absolute，却忘了给它的直接父级 <li> 加 position: relative —— 这会导致所有二级菜单堆叠在同一个位置，或者错位到不可见区域。
- 一级菜单项（
<li class="menu-item">）必须声明position: relative - 二级菜单（
<ul class="submenu"></ul>）用position: absolute，且只能放在对应一级<li>内部 - 避免在中间层级（比如外层
<ul></ul>）误加position: relative，会截断定位流
top 和 left 怎么设才对齐一级菜单右边缘？
二级菜单默认从一级菜单项左上角开始定位，要让它“贴着右侧展开”，关键是 left: 100%，而不是 left: 0 或固定像素值。这样它会紧挨着一级菜单项的右边界出现，且不受字体大小、padding 影响。
如果一级菜单项有右 padding 或 border，left: 100% 依然准确；但若想留点间隙，可用 left: calc(100% + 4px)，其中 4px 是你想要的间距。
立即学习“前端免费学习笔记（深入）”；
-
top: 100%让二级菜单底部对齐一级菜单下边缘（常用于向下展开） -
top: 0+left: 100%是侧向展开的标准组合 - 避免用
right: 0，它依赖父容器宽度，而left: 100%是相对自身定位框计算，更稳定
为什么鼠标移入时二级菜单闪退或消失？
根本原因是 HTML 结构中一级 <li> 和二级 <ul></ul> 之间存在垂直/水平空隙（比如换行符、空格、margin），导致鼠标经过间隙时离开一级菜单触发 :hover 失效，二级菜单瞬间隐藏。
CSS 里 display: inline-block 或未清除浮动也会引入不可见间隙。最可靠解法是让二级菜单和一级菜单项在视觉上“无缝衔接”。
- 给一级
<li>设置overflow: hidden或display: flex可消除部分间隙 - 把二级
<ul></ul>的margin-top设为负值（如margin-top: -1px）补缝 - 更推荐：HTML 中删掉一级
<li>和二级<ul></ul>之间的换行与空格，写成<li>...<ul>...</ul> </li>
移动端或键盘导航时，纯 :hover 会失效
:hover 在触摸设备上无意义，且无法被键盘 Tab 触达。如果只靠 CSS 实现，二级菜单在 iPad、安卓 Chrome 或屏幕阅读器中基本不可用。
真正可用的方案必须配合 JavaScript 控制 aria-expanded 和焦点管理，CSS 则通过 [aria-expanded="true"] 或 .is-open 类来切换显示。否则这个“二级菜单”只是个视觉装饰。
- 别用
<a href="#"></a>做触发按钮，应改用<button type="button"></button> - 二级菜单需设
role="menu"，子项用role="menuitem" - CSS 显示逻辑应同时响应
:hover和.is-open，而非仅前者
