纯 HTML 无法实现交互式下拉菜单，因为 <select> 是原生表单控件，不支持嵌套子菜单、:hover 悬停展开或 HTML 内容渲染；真正实现二级下拉需依赖 CSS（如 :hover + 邻居选择器或 details/summary）或 JavaScript（用于键盘导航、无障碍及移动端适配）。
纯 HTML 无法实现交互式下拉菜单——<select> 是表单控件，天生不支持嵌套子菜单或悬停展开；真要做出“鼠标悬停展开二级菜单”这类效果，必须配合 CSS 和/或 JavaScript。
为什么 <select> 做不了真正的下拉菜单
<select> 元素由浏览器原生渲染，样式受限、无法添加图标/分组标题/多列布局，更不能响应 :hover 或嵌套 <ul>。常见误操作是试图在 <option> 里塞 HTML 标签（如 <strong>），结果全部被忽略或直接显示为文本。
- 所有现代浏览器会强制忽略
<option>内部的 HTML 标签 -
<select multiple>和<datalist>都不解决层级展开问题 - 无障碍支持虽好，但功能边界清晰：它只负责单选/多选值提交，不是 UI 组件
用 <details> + <summary> 快速实现轻量下拉（无需 JS）
这是目前最接近“纯 HTML 下拉”的合法方案，语义正确、自带展开收起逻辑、支持键盘操作（Space/Enter 触发），且能包裹任意 HTML 内容。
<details>
<summary>菜单标题</summary>
<nav>
<a href="/home">首页</a>
<a href="/about">关于</a>
<div class="submenu">
<span>产品</span>
<a href="/pro/a">A 型号</a>
<a href="/pro/b">B 型号</a>
</div>
</nav>
</details>
- 默认收起，点击
<summary>展开；再点一次收起 - CSS 可用
details[open] > summary::after控制箭头方向 - 注意：Safari 旧版本（≤15.4）对
<details>的display: contents支持有问题，慎用于复杂布局
用 <nav> + <ul> + CSS 实现可 hover 的导航下拉
这是实际项目中最常用的方案，结构清晰、SEO 友好、样式完全可控。核心在于用 :hover 触发子 <ul> 显示，并用 position: absolute 定位。
立即学习“前端免费学习笔记（深入）”；
<nav>
<ul>
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">产品</a>
<ul class="dropdown-menu">
<li><a href="/pro/a">A 型号</a></li>
<li><a href="/pro/b">B 型号</a></li>
</ul>
</li>
</ul>
</nav>
- 关键 CSS：
.dropdown-menu { display: none; }+.dropdown:hover .dropdown-menu { display: block; } - 移动端需额外处理：加
@media (hover: hover)区分触屏设备，否则 iOS 上第一次点击会触发 hover 而非跳转 - 焦点管理容易被忽略：键盘用户 Tab 进入
.dropdown-toggle后，应按 ↓ 键进入子菜单（需 JS 补充 ARIA 属性和键盘事件）
何时必须上 JavaScript（以及该避开哪些坑）
当需要支持键盘导航（↑↓→←）、Esc 关闭、点击外部关闭、延迟展开/收起、或与 React/Vue 等框架集成时，CSS :hover 就不够用了。
- 别用
onclick直接切display：会导致屏幕阅读器无法感知状态变化，必须同步设置aria-expanded和aria-hidden - 避免监听全局
click判断 target：移动端touchstart和click有 300ms 延迟，应优先用pointerdown - 如果用
focusout关闭菜单，注意子元素获取焦点时会先触发父级focusout，得用relatedTarget过滤
真正难的不是展开动画，而是让键盘、屏幕阅读器、触屏、鼠标用户都有一致体验——这部分常被当作“锦上添花”，但上线后第一个投诉往往来自它。
