如何仅用 CSS 实现 Tab 键触发的巨型菜单（Mega Menu）展开-html教程-PHP中文网

如何仅用 CSS 实现 Tab 键触发的巨型菜单（Mega Menu）展开

本文介绍如何利用 CSS 的 :focus-within 伪类，在不依赖 JavaScript 的前提下，使巨型菜单既支持鼠标悬停展开，也支持键盘 Tab 导航聚焦时自动展开，提升无障碍访问体验。

本文介绍如何利用 css 的 `:focus-within` 伪类，在不依赖 javascript 的前提下，使巨型菜单既支持鼠标悬停展开，也支持键盘 tab 导航聚焦时自动展开，提升无障碍访问体验。

在构建符合无障碍标准（WCAG）的导航组件时，仅靠 :hover 实现巨型菜单展开是不够的——键盘用户（如使用 Tab 键导航的视障人士或偏好键盘操作的用户）无法触发菜单显示，导致功能不可达。原方案尝试对

元素设置 tabindex="1" 并监听 :focus，但因

以下是关键 CSS 修改部分（其余样式保持不变）：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

/* 替换原规则 */
li.has-children:hover .mm-cont,
li.has-children:focus-within .mm-cont {
  display: flex;
}

✅ 优势说明：

零 JS 依赖：纯 CSS 实现，轻量、可靠、无运行时风险；
无障碍友好：满足 WCAG 2.1 “键盘可操作”（2.1.1）与“焦点可见性”（2.4.7）要求；
语义清晰：无需额外 ARIA 属性（如 aria-expanded），但建议仍配合 aria-haspopup="true" 和 aria-expanded 属性增强语义（由 JS 或服务端动态控制更佳）；
兼容性良好：主流浏览器（Chrome 65+、Firefox 61+、Safari 15.4+、Edge 79+）均支持；旧版 Safari 可通过 @supports 回退至仅 hover。

⚠️ 注意事项：