使用HTML中的details标签制作一个简易的下拉菜单-html教程-PHP中文网

仅适合 faq 等静态折叠场景，不支持高阶菜单交互；需用 css 重置箭头、避免 hover 展开、子项点击后保持展开需结构分离，复杂菜单应以 button[aria-expanded] 为主，仅作无 js 降级兜底。

使用html中的details标签制作一个简易的下拉菜单

details 标签本身不是下拉菜单，但能模拟基础展开收起行为

直接用 <details></details> 做“菜单”会踩一个根本性误区：它没有点击项高亮、不支持键盘导航、无法阻止默认展开逻辑，且 <summary></summary> 点击后总会切换状态，没法做成「始终展开」或「点击不收起」的菜单。它适合 FAQ 或文档折叠区块，不适合交互要求稍高的菜单。

用 details + CSS 覆盖默认箭头和样式是常见需求

浏览器给 <summary></summary> 自带小三角，且不同内核渲染位置/颜色不一致。要统一外观，必须重置：

html-to-pptx-converter

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

下载

用 list-style: none 干掉默认箭头
用 ::marker 伪元素控制箭头（Chrome/Firefox 支持，Safari 15.4+ 才稳定）
更稳妥的做法是用 background-image 或 ::after 自定义图标，并配合 transform: rotate(90deg) 控制展开方向
<details></details> 展开时会添加 open 属性，可据此写 details[open] > summary::after 切换图标

details 无法响应 hover 或子项点击事件的典型问题

很多人想实现「悬停展开」「点击子链接不关闭」，但 <details></details> 的行为是硬编码的：只要点到 <summary></summary> 就触发开关；鼠标移开不会自动收起；子 <a></a> 或 <button></button> 点击后，<details></details> 仍保持 open 状态——这看似符合预期，但实际中常因 CSS overflow: hidden 或动画导致内容被裁切，或焦点管理缺失造成可访问性失败。

不要依赖 :hover 触发展开：移动端无效，且不符合语义
若需点击子项后保持展开，确保子元素不在 <summary></summary> 内，且父 <details></details> 没加 ontoggle 逻辑强制关闭
用 tabindex="-1" 和手动 focus() 补足键盘操作链，否则屏幕阅读器可能跳过内容

真正需要菜单交互时，details 只能当视觉降级 fallback

如果你的场景涉及多级嵌套、快捷键（如上下键切换）、ESC 关闭、点击外部收起——这些都超出 <details></details> 能力范围。此时应优先用 <button aria-expanded></button> + <div role="menu">，把 <code><details></details> 当作无 JS 时的简化版兜底。