纯HTML无法实现下拉导航交互，必须配合CSS或JavaScript；select控件语义不符、样式受限、不支持子菜单且无障碍差；CSS:hover方案轻量兼容但需position定位；移动端可用details/summary或JS增强可访问性。
纯 HTML 无法实现下拉导航的交互效果——必须配合 CSS（悬停或焦点控制）或 JavaScript（点击/键盘支持），否则菜单项只会静态堆叠，没有展开收起行为。
为什么 <select></select> 不适合做导航下拉
<select></select> 是表单控件，语义是“选项选择”，不是“页面跳转入口”。浏览器会强制用原生下拉框渲染，无法自定义样式、无法嵌套链接、不支持子菜单，且移动端体验割裂。
- 点击后无法保持展开状态，选中即关闭
-
<option></option>内不能放<a></a>或图标，也不支持 hover 效果 - 无障碍支持差：屏幕阅读器会将其读作“组合框”，而非导航结构
CSS 实现二级下拉（无 JS，依赖 :hover）
这是最轻量、兼容性好（IE9+）、适合桌面端的方案。核心是隐藏子菜单（<ul class="submenu"></ul>），在父级 <li> 悬停时显示。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 父
<li>必须设为position: relative，子<ul></ul>用position: absolute定位 - 子菜单默认
display: none，悬停时改为display: block（注意：用visibility: hidden会占布局空间） - 移动端需额外加
@media规则启用点击展开（:focus-within或 JS 辅助）
<nav>
<ul class="nav">
<li><a href="/home">首页</a></li>
<li class="has-submenu">
<a href="/products">产品</a>
<ul class="submenu">
<li><a href="/products/web">Web 开发</a></li>
<li><a href="/products/mobile">移动应用</a></li>
</ul>
</li>
</ul>
</nav>
CSS 中对应关键规则：
.nav > li { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 0; }
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu { display: block; }
移动端点击展开必须用 JS 吗？
不一定。可用 details/summary 原生标签模拟（语义正确、无需 JS、自带 ARIA），但仅适合单层折叠；若需多级或更精细控制（如点击其他区域自动收起），JS 仍是主流选择。
-
<details></details>在 Safari/Chrome/Firefox 中支持良好，但 IE 完全不支持 - 不能直接嵌套
<details></details>实现三级菜单（部分浏览器会中断事件冒泡） - 若用 JS，优先监听
click而非touchstart，避免双击放大等干扰
一个最小可用 JS 片段（不依赖框架）：
document.querySelectorAll('.has-submenu > a').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
const submenu = el.nextElementSibling;
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open');
}
});
});
对应 CSS 加一句：.submenu.open { display: block; }
真正难的不是写出第一版下拉菜单，而是让键盘用户能用 Tab 进入、Enter 展开、Esc 收起，同时不破坏屏幕阅读器的导航流——这些细节往往被忽略，但直接影响可访问性合规性。
