HTML下拉导航布局的完整代码教程-html教程-PHP中文网

纯HTML无法实现下拉导航交互，必须配合CSS或JavaScript；select控件语义不符、样式受限、不支持子菜单且无障碍差；CSS:hover方案轻量兼容但需position定位；移动端可用details/summary或JS增强可访问性。

html下拉导航布局的完整代码教程

纯 HTML 无法实现下拉导航的交互效果——必须配合 CSS（悬停或焦点控制）或 JavaScript（点击/键盘支持），否则菜单项只会静态堆叠，没有展开收起行为。

为什么不适合做导航下拉

是表单控件，语义是“选项选择”，不是“页面跳转入口”。浏览器会强制用原生下拉框渲染，无法自定义样式、无法嵌套链接、不支持子菜单，且移动端体验割裂。

点击后无法保持展开状态，选中即关闭
内不能放或图标，也不支持 hover 效果
无障碍支持差：屏幕阅读器会将其读作“组合框”，而非导航结构

CSS 实现二级下拉（无 JS，依赖 `:hover`）

这是最轻量、兼容性好（IE9+）、适合桌面端的方案。核心是隐藏子菜单（

），在父级

悬停时显示。

关键点：

父
必须设为 position: relative，子用 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 中对应关键规则：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

.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 仍是主流选择。

在 Safari/Chrome/Firefox 中支持良好，但 IE 完全不支持
不能直接嵌套实现三级菜单（部分浏览器会中断事件冒泡）
若用 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 收起，同时不破坏屏幕阅读器的导航流——这些细节往往被忽略，但直接影响可访问性合规性。