纯CSS多级下拉菜单必须用嵌套结构并依赖li:hover > ul触发显示；核心要求包括：子须为父直接子元素、父级设position: relative、子菜单用position: absolute; top: 100%; left: 0精确定位、隐藏/显示采用opacity+visibility+pointer-events组合以支持过渡动画，且移动端需降级或改用JS实现可访问性。
纯CSS下拉菜单必须用嵌套<ul></ul>和:hover
纯CSS实现多级下拉，核心就两条：结构上必须是嵌套的<ul></ul>（不能用<div>或<code><span></span>替代），行为上依赖父级:hover触发子级显示。浏览器原生不支持:focus-within在所有旧版中稳定工作，所以别指望靠焦点模拟——老版本Safari和IE根本不可靠。
常见错误是把子菜单写成兄弟节点（比如紧挨着<li>的独立<ul></ul>），这样:hover一移开就收起，来不及点击。正确做法是子<ul></ul>必须作为当前<li>的直接子元素：
<li>
<a href="#">产品</a>
<ul><!-- 这里必须是 li 的子元素 -->
<li><a href="#">Web端</a></li>
<li><a href="#">移动端</a></li>
</ul>
</li>
position: absolute必须配合top: 100%和left: 0
子菜单默认会撑开父容器、破坏布局，所以必须脱离文档流。只设position: absolute不够，得明确指定位置，否则可能偏移或重叠：
-
top: 100%让子菜单紧贴父<li>底部，不是靠margin-top或transform模拟——后者在缩放或高DPI屏下容易错位 -
left: 0对齐父级左边缘；若需右对齐二级菜单（比如“帮助”下拉向右展开），改用right: 0，但别混用left和right - 父级
<li>必须设position: relative，否则absolute会相对于最近定位祖先，而不是当前项
隐藏/显示靠opacity + visibility，别只用display: none
display: none会导致过渡动画失效（CSS无法对display属性做transition），所以要用组合方案：
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
opacity: 0; visibility: hidden; pointer-events: none; -
:hover激活时：opacity: 1; visibility: visible; pointer-events: auto; - 加
transition: opacity 0.2s ease，视觉更自然 - 注意：不要给
height或max-height做过渡——计算复杂、易抖动，且无法精确控制多行高度
移动端兼容性差，必须加@media降级处理
纯CSS下拉在触摸设备上基本不可用：:hover只在模拟指针时触发一次，点一下就收，点第二下才进链接。这不是bug，是规范行为。
必须用媒体查询主动降级：
@media (hover: none) and (pointer: coarse) {
/* 触摸设备：关闭 hover 效果，改为点击展开 */
.dropdown-menu { display: none; }
.dropdown-item:hover .dropdown-menu,
.dropdown-item:focus .dropdown-menu { display: block; }
}但这样仍不完美——iOS Safari对:focus支持不稳定。真实项目里，只要涉及三级以上或关键导航，就得切到JavaScript控制aria-expanded和aria-haspopup，CSS只负责样式。
最常被忽略的一点：键盘用户需要Tab进入子菜单，而纯CSS做不到焦点管理。如果要满足WCAG 2.1，这一步绕不开JS。
