应使用 <details> 而非 <select> 实现多级下拉，因 <select> 不支持嵌套展开，而 <details> 天然支持无限嵌套、语义正确、无需 JS 且可访问性良好，仅 IE 全系不支持。
下拉菜单用 <select> 还是 <details>？
纯 HTML 实现多级下拉，<select> 本身不支持嵌套选项（<optgroup> 只能一级分组，不能点击展开子项），所以真要“多级”，必须放弃原生 <select>。现在最轻量、语义正确、无需 JS 就能实现两级展开的方案是 <details> + <summary>。它天然支持嵌套，且默认可访问性良好。
常见错误：硬套 <select> + <option value="level2"> 模拟二级——这只会让选项平铺，用户无法感知层级，屏幕阅读器也读不出结构。
-
<details>在 Chrome/Firefox/Safari/Edge 中均原生支持（IE 全系不支持） - 每个
<details>可包含另一个<details>，实现无限嵌套 - 不要给
<summary>加onclick或role="button"——它本身就是可聚焦、可回车展开的控件
用 <details> 写三级菜单的实际 HTML 结构
下面是一个可直接粘贴测试的三级结构，注意缩进不是必需的，但影响可维护性：
<details>
<summary>产品</summary>
<details>
<summary>前端工具</summary>
<a href="/webpack">Webpack</a>
<a href="/vite">Vite</a>
</details>
<details>
<summary>后端框架</summary>
<a href="/express">Express</a>
<a href="/fastify">Fastify</a>
</details>
</details>
<details>
<summary>文档</summary>
<a href="/api">API 手册</a>
<a href="/changelog">更新日志</a>
</details>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 每一级
<details>必须有且仅有一个<summary>，放在最前面 - 子菜单内容（包括下一级
<details>）必须直接放在<summary>后面，不能包在额外<div>里（否则折叠时可能布局错乱） -
<a>标签不需要加href="#"或javascript:void(0)——真实链接更利于 SEO 和可访问性
样式控制：去掉默认箭头、调整缩进和间距
浏览器对 <summary> 的默认三角箭头样式不统一（Chrome 是右向，Firefox 是下向），且没有内边距。要用 CSS 统一表现：
details > summary {
list-style: none;
padding-left: 16px;
}
details > summary::marker {
content: "▶ ";
}
details[open] > summary::marker {
content: "▼ ";
}
details details > summary {
padding-left: 32px;
}
details details details > summary {
padding-left: 48px;
}
说明：
-
::marker替换原生箭头比用appearance: none+ 背景图更可靠（Safari 对appearance支持不稳定） - 用层级选择器
details details > summary控制缩进，比加 class 更少侵入 HTML - 不要用
display: block强制改<summary>显示——它默认就是块级，改了反而破坏可访问性
兼容 IE 或需要 hover 展开？得用 CSS + :hover 模拟
IE 不支持 <details>，如果必须兼容，唯一纯 HTML/CSS 方案是用 :hover + visibility 或 max-height 动画。但要注意：
- 移动端 touch 设备上
:hover行为不可靠（第一次点击触发 hover，第二次才跳转） - 不能用
display: none控制显隐——会导致键盘 Tab 顺序断裂，损害可访问性 - 推荐用
visibility: hidden+opacity: 0+pointer-events: none组合，父元素:hover时全部还原
真正需要多级、跨浏览器、可键盘操作的菜单，HTML 本身能力已到边界。这时候该考虑用 ARIA role="menu" + JS 控制，而不是硬拗纯 HTML。
多级菜单的“纯 HTML”方案本质是取舍：用 <details> 换来语义和简易性，但放弃 IE 支持；用 :hover 换来兼容性，但牺牲可访问性和移动端体验。选哪个，取决于你的真实用户环境和底线要求。
