select元素无法实现多级下拉菜单，必须使用语义化ul/li嵌套结构，并配合ARIA属性、JS状态管理及CSS热区优化确保可访问性与跨端兼容。

select 元素根本不能做多级下拉菜单，别试了。

必须用 ul/li 嵌套结构

浏览器对 ul 和 li 的默认语义、焦点流、屏幕阅读器播报都有成熟支持。用 div 堆砌会导致 Tab 键跳转错乱、子项无法被键盘访问，且 CSS :hover 定位极易失效。

• 顶级 ul 加 role="menubar"
• 每个一级 li 里放 a 或 button，并带 aria-haspopup="true" 和 aria-expanded="false"
• 子菜单必须是父 li 的直接子元素，且为 ul（不是 ol 或 div）
• 子 ul 加 role="menu"，子项 li 加 role="menuitem"

:hover 在移动端完全不可靠

iOS Safari 和 Android Chrome 几乎不响应真机上的 :hover，纯 CSS 方案等于对手机用户关闭功能。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 桌面端可保留 li:hover > ul 作为辅助，但不能依赖它
• 移动端必须用 JS 切换类，比如 submenu-open，再通过 .submenu-open > ul 控制显隐
• 点击父项时，先关闭其他所有展开项，再切换当前状态
• 必须同步更新 aria-expanded 值，否则屏幕阅读器读不出状态变化

悬停闪退是因为像素级空隙

鼠标移出父项瞬间菜单消失，不是 JS 写错了，是 CSS 热区断连。

立即学习“前端免费学习笔记（深入）”；

• 子 ul 绝对定位时，top: 100% 后不要加 margin-top: 1px —— 这 1px 就是闪退元凶
• 推荐方案：父 li 加 padding-bottom: 1px 扩展热区，或子 ul 用 transform: translateY(-1px) 微调贴合
• 避免用 pointer-events: none 隐藏子菜单，这会让键盘焦点直接跳过整个区域

最易被忽略的是 visibility: hidden 和 display: none 的区别：前者保留在焦点流中，后者彻底移除——键盘用户需要前者才能按 Tab 进入子菜单。