使用HTML代码创建下拉菜单的进阶教程-html教程-PHP中文网

纯 html 无法实现交互式下拉菜单，因为是原生表单控件，不支持嵌套子菜单、:hover 悬停展开或 html 内容渲染；真正实现二级下拉需依赖 css（如 :hover + 邻居选择器或 details/summary）或 javascript（用于键盘导航、无障碍及移动端适配）。

使用html代码创建下拉菜单的进阶教程

纯 HTML 无法实现交互式下拉菜单——<select></select> 是表单控件，天生不支持嵌套子菜单或悬停展开；真要做出“鼠标悬停展开二级菜单”这类效果，必须配合 CSS 和/或 JavaScript。

为什么 `<select></select>` 做不了真正的下拉菜单

<select></select> 元素由浏览器原生渲染，样式受限、无法添加图标/分组标题/多列布局，更不能响应 :hover 或嵌套 <ul></ul>。常见误操作是试图在 <option></option> 里塞 HTML 标签（如 <strong></strong>），结果全部被忽略或直接显示为文本。

所有现代浏览器会强制忽略 <option></option> 内部的 HTML 标签
<select multiple></select> 和 <datalist></datalist> 都不解决层级展开问题
无障碍支持虽好，但功能边界清晰：它只负责单选/多选值提交，不是 UI 组件

用 `<details></details>` + `<summary></summary>` 快速实现轻量下拉（无需 JS）

这是目前最接近“纯 HTML 下拉”的合法方案，语义正确、自带展开收起逻辑、支持键盘操作（Space/Enter 触发），且能包裹任意 HTML 内容。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<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></summary> 展开；再点一次收起
CSS 可用 details[open] > summary::after 控制箭头方向
注意：Safari 旧版本（≤15.4）对 <details></details> 的 display: contents 支持有问题，慎用于复杂布局

用 `<nav></nav>` + `<ul></ul>` + CSS 实现可 hover 的导航下拉

这是实际项目中最常用的方案，结构清晰、SEO 友好、样式完全可控。核心在于用 :hover 触发子 <ul></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 过滤