纯html下拉菜单可用实现，无需js；须为首个子元素且不可包裹；支持键盘操作与无障碍，但ie不支持、safari旧版对:has()兼容差，互斥需锚点或接受多开。
用 <details></details> 和 <summary></summary> 实现纯 HTML 下拉菜单
不需要 JavaScript，也能做出可用的下拉交互——<details></details> 是原生支持的语义化方案，点击 <summary></summary> 就展开/收起内容，浏览器默认带箭头和状态切换逻辑。
常见错误是把 <summary></summary> 写成空标签或套了多余元素（比如 <div>），这会导致点击区域失效或样式错乱。它必须是 <code><details></details> 的第一个子元素，且不能被包裹在其他块级元素里。
-
<details></details>默认是关闭状态；加open属性可默认展开 -
<summary></summary>里的文字会显示为触发按钮，支持内联样式和图标（如<span>▼</span>） - Chrome / Firefox / Safari 都支持，IE 完全不支持（需降级提示）
- 不要给
<summary></summary>加tabindex或role—— 它天生可聚焦、可键盘操作
如何让多个 <details></details> 互斥（类似单选下拉）
原生 <details></details> 没有“只允许一个展开”的机制，得靠 CSS + 小技巧模拟。核心思路是：利用 :has() 选择器监听其他项是否已展开，再隐藏当前项的 <summary></summary> 或禁用其交互。
但注意：:has() 在 Safari 15.4+ 和 Chrome 105+ 才稳定支持，旧版 Safari 会直接忽略整条规则。所以更稳妥的做法是用 CSS 强制收起其他项：
<details class="dropdown"><summary>选项一</summary><menu><li>子项 A</li></menu></details><details class="dropdown"><summary>选项二</summary><menu><li>子项 B</li></menu></details>
然后加这段 CSS：
.dropdown:not(:target) summary { display: none; }
.dropdown:target summary { display: list-item; }
但这需要配合锚点跳转（比如点击时 href="#item1"），实际体验略生硬。多数场景建议接受多开，或明确告知用户这是“非互斥”设计。
样式定制难点：箭头图标与折叠动画
浏览器默认箭头位置和颜色不可直接用 CSS 覆盖，只能用 list-style 或伪元素遮盖重绘。最可靠方式是隐藏原生箭头，再用 ::after 添加自定义图标：
summary {
list-style: none;
}
summary::after {
content: "▼";
margin-left: 8px;
font-size: 0.8em;
}
details[open] summary::after {
content: "▲";
}
展开动画无法直接作用于 <details></details> 内容区（因为它是 display: block 切换，不是 height 过渡）。想加淡入效果，得给内部元素设 opacity 和 max-height，并配合 transition，但要注意：max-height 从 0 → 具体值需要预估高度，否则动画卡顿。
- 用
height: auto无法过渡，必须用固定值或max-height - 若内容高度不确定，优先用 opacity + visibility 控制，放弃高度动画
- 移动端点击区域小？给
summary加padding，别只依赖文字区域
无障碍与键盘支持的实际表现
<details></details> 天然支持空格键和回车键展开/收起，屏幕阅读器会读出 “collapsible section” 类似提示。但容易被忽略的是焦点管理：展开后，焦点不会自动移到内容首项，用户得手动 Tab 导航。
如果菜单项含链接或按钮，确保它们有明确的 tabindex="0"（除非已是可聚焦元素），且顺序符合视觉流。避免用 <div> 模拟菜单项——它既不可聚焦也不可键盘操作。
<ul>
<li>不要移除 <code><summary></summary> 的默认 outline，或至少提供等效的焦点样式
<details></details> 支持良好；VoiceOver 在 iOS 15+ 正常，但旧版本可能读作“group”而非“disclosure triangle”真正麻烦的是嵌套下拉——<details></details> 套 <details></details> 会导致子项箭头行为混乱，且部分屏幕阅读器会重复播报层级。简单菜单就别嵌套，复杂结构还是得上 JS。
