二级菜单闪退主因是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 和多数安卓浏览器里仅在模拟桌面模式或极少数场景下触发，不能当交互主逻辑用。
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 纯 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 直接不达标
