不能用实现多级下拉导航，因其仅支持单层结构、无法嵌套、不响应hover/键盘/点击子项；必须采用语义化嵌套结构配合css显隐与js交互，并严格遵循aria角色规范和焦点管理。

用 <select></select> 实现多级下拉导航根本走不通——它不支持嵌套、hover 展开、键盘导航进子项，也不响应点击二级选项。真要可用，必须用 <ul></ul> 嵌套结构配 CSS 显隐 + 少量 JS 补交互。

为什么不能用 select 做多级菜单

<select></select> 是单层表单控件，浏览器强制压平所有选项。哪怕你硬塞 <optgroup></optgroup>，子项仍被展平显示，<optgroup></optgroup> 内不能嵌 HTML、无法 hover、不能绑定 click 到具体子项，更别提键盘 Tab 进入二级菜单。常见错误是写 document.getElementById('city').innerHTML = '...'，这会直接销毁已绑定的事件监听器，且存在 XSS 风险。

ul/li 嵌套结构怎么写才不出错

子 <ul></ul> 必须是父 <li> 的**直接子元素**，否则 CSS 选择器（如 li:hover ul）失效，键盘导航中断，屏幕阅读器读错层级。正确结构示例：

• 服务
  • 咨询
  • 实施

• 外层 <ul></ul> 加 role="menubar"，每个一级项加 role="menuitem"
• 有子菜单的 <li> 必须同时带 aria-haspopup="true" 和 aria-expanded="false"
• 子 <ul></ul> 加 role="menu"，其子 <li> 加 role="menuitem"
• 不要把子菜单写在父 <li> 外面，也不要套 <div> 包裹 <h3>纯 CSS :hover 实现的三个硬伤</h3> <p>桌面端看似能用 <code>li:hover ul { display: block; }，但实际踩坑密集：
  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载
  • 移动端完全失效：iOS/Android 上 :hover 不可靠，首次点击后才模拟一次，且无法键盘操作
  • 鼠标移入途中闪退：一级和二级菜单之间若有像素间隙（比如 border 或 margin），:hover 立刻中断
  • 焦点不可达：Tab 键无法进入子菜单项，视障用户直接跳过整个区域
  • 定位错乱：父容器若用了 transform、perspective 或 will-change，子菜单会飘到页面左上角

  解决办法不是死磕 :hover，而是用 JS 切换 aria-expanded 和 class，并监听 keydown（Enter/Space）与 focusin 事件。

  移动端和键盘用户怎么兼容

  纯 :hover 方案对触屏和键盘用户等于不存在。必须补 JS 逻辑：

  • 点击父项时，先关闭其他所有展开项，再切换当前子菜单显隐
  • 同步更新 aria-expanded 值，确保屏幕阅读器能感知状态变化
  • 为可聚焦元素（如 <a></a> 或 <button></button>）加 tabindex="0"，并处理 Enter 和 Space 键触发展开
  • 用 focusin/focusout 模拟 hover 效果，避免依赖 pointer-events
  • 禁用 pointer-events: none 隐藏子菜单——它会让焦点丢失，键盘用户进不去

  最易被忽略的是：子菜单 <ul></ul> 默认应设 aria-hidden="true"，展开时改为 "false"；未选省时，市下拉框必须 disabled 并加 aria-disabled="true"。这些不是“锦上添花”，是让菜单真正可用的底线。