标签不适合做导航，因其语义是折叠信息块而非导航；不支持hover、嵌套、横向布局及稳定移动端交互，且IE完全不支持、旧版浏览器存在兼容性问题。
<details></details> 标签确实能实现「纯 HTML 下拉交互」，但它不是为导航设计的，直接当导航条用会出问题。
<details></details> 的语义和限制很明确
- 它是为「可折叠的额外信息块」设计的，比如 FAQ、技术说明、表单补充项
- 浏览器原生只支持单层展开/收起，不支持 hover 触发（必须点击
<summary></summary>） - 没有子菜单嵌套能力：嵌套
<details></details>在多数浏览器里会中断事件流或样式错乱 - 无障碍支持虽好（自动加 aria-expanded），但键盘操作逻辑不符合导航预期（比如 Tab 键无法进入子项）
真实用 <details></details> 做导航时的典型翻车点
-
<summary></summary>里放<a></a>链接，点击后既跳转又触发展开 → 行为冲突，部分浏览器会跳转失败或闪退 - 用 CSS 强行把
<details></details>改成横向布局，但display: flex+<summary></summary>的默认渲染顺序会让下拉内容错位 - 在移动端，
<summary></summary>的点击热区太小，且 iOS Safari 对<details></details>的 focus 状态处理不稳定，容易误触
如果非要用它做轻量下拉，只能这样妥协
- 把导航项做成独立的
<details></details>块，每个只控制一个子菜单，不嵌套 -
<summary></summary>内只放纯文本，链接全部挪到<details></details>内部的<ul></ul>里 - 加上
open属性做默认展开（仅限首屏关键项） - 必须补 CSS：强制
<summary></summary>无 outline，禁用 user-select，重设 cursor - 示例结构：
<details> <summary>产品</summary> <ul> <li><a href="/web">网页设计</a></li> <li><a href="/dev">网站开发</a></li> </ul> </details>
最容易被忽略的兼容性细节
<details></details> 在 IE 完全不支持，Edge 79+ 才稳定；旧版 Safari（≤15.6）对 open 属性的 JS 控制有延迟；如果你的用户里还有企业内网用户（尤其金融、政务场景），大概率还在用 Chrome 90 以下版本 —— 那些版本对 <details></details> 的 focus 管理存在焦点丢失 bug。
纯 HTML 交互设计思维没错，但得承认：导航不是「要不要 JS」的问题，而是「能不能承受语义错位和体验断层」的问题。
