二级菜单闪退主因是dom结构断裂和css选择器范围不足，需将二级ul嵌入一级li内、用:hover+>组合选择器扩展悬停区域，并为触屏和键盘访问补充js与aria支持。
hover 触发二级菜单时下拉区域消失
鼠标从一级菜单移向二级菜单途中，两个元素之间有空隙，mouseleave 立刻触发，菜单闪退。这不是 CSS 写错了，是 DOM 结构没连上。
- 把
<ul></ul>（二级菜单）直接放在对应<li>（一级项）内部，确保父子关系连续 - 用
display: block或visibility: visible控制显示，别用opacity: 0配pointer-events: none—— 后者会让中间区域无法 hover 过渡 - 给一级
<li>加position: relative，二级<ul></ul>用position: absolute定位，避免脱离文档流导致位置偏移
CSS 中 hover 选择器写法容易漏掉父级状态
只写 ul li:hover ul 不够，它只在鼠标真正在 li 上时生效；一旦二级菜单展开，鼠标移到子项上，父级 li 就不再满足 :hover，菜单立刻收起。
- 必须让整个悬停区域“连成一片”：用
ul li:hover > ul, ul li ul:hover把二级菜单自身也纳入 hover 范围 - 更稳妥的做法是加一层包裹容器，比如
<nav class="menu"></nav>，然后用.menu:hover ul ul统一控制，避免逐级嵌套失效 - 注意层级顺序：二级
<ul></ul>必须紧跟在一级<li>里，不能被<div> 或其他标签隔开，否则 <code>>子选择器不匹配移动端 touch 设备 hover 不生效怎么办
手机和平板没有“悬停”概念，
:hover在 iOS Safari 和多数安卓浏览器里仅在模拟桌面模式或极少数场景下触发，不能当交互主逻辑用。
X-Node企业快速建站1.0.6.0801下载特色介绍： 1、ASP+XML+XSLT开发，代码、界面、样式全分离，可快速开发 2、支持语言包，支持多模板，ASP文件中无任何HTML or 中文 3、无限级分类，无限级菜单，自由排序 4、自定义版头（用于不规则页面） 5、自动查找无用的上传文件与空目录，并有回收站，可删除、还原、永久删除 6、增强的Cache管理，可单独管理单个Cache 7、以内存和XML做为Cache，兼顾性能与消耗 8、
- 纯 CSS hover 二级菜单本质是桌面端专属方案，上线前必须确认目标用户设备分布
- 如果要兼容触屏，得补 JS：监听
touchstart给菜单加active类，再用 CSS 控制显示；但注意避免点击穿透和重复触发 - 更现实的做法是用媒体查询降级：
@media (hover: none) and (pointer: coarse)下直接显示一级菜单，二级改用点击展开（如加<button></button>触发aria-expanded）
键盘焦点与可访问性被 hover 方案绕过
只靠
:hover实现菜单展开，键盘用户按Tab到一级菜单项时，二级菜单不会出现，Enter或Space也没响应 —— 屏幕阅读器根本感知不到隐藏内容。立即学习“前端免费学习笔记（深入）”；
- 必须配合
aria-haspopup="true"和aria-expanded="false/true"，并在 JS 中同步更新状态 - 用
:focus-within替代部分:hover场景（例如li:focus-within > ul），能让键盘聚焦时也展开菜单 - 二级菜单的
<ul></ul>必须有role="menu"，子项用role="menuitem"，且 Tab 键能顺序进入、Arrow键能切换，否则 WCAG 2.1 AA 直接不达标
