:focus-within是css伪类，当元素自身或其任意后代获得焦点时匹配，适合下拉菜单因其能保持父容器展开状态，使键盘用户可导航菜单项，避免:hover仅限鼠标、:focus失焦即收起的问题。

什么是 :focus-within，它为什么适合下拉菜单 :focus-within 是一个 CSS 伪类，当元素本身或其**任意后代获得焦点**时，该元素就会匹配。它不像 :hover 那样依赖鼠标悬停，也不像 :focus 那样只作用于聚焦元素自身——这正好解决下拉菜单“鼠标移开就消失”的经典痛点。 关键在于：只要菜单里的链接、输入框、按钮等可聚焦元素处于焦点状态，父级容器（比如 .dropdown）就能保持展开样式，用户就有时间用键盘导航或点击。

注意：:focus-within 在现代浏览器中支持良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），但 IE 完全不支持，需确认目标环境。

基础 HTML 结构必须满足可聚焦条件 下拉菜单要能“留住”，HTML 结构得让焦点能自然落入菜单内部。常见错误是只给触发按钮加 tabindex，却忘了菜单项本身是否可聚焦。

• 触发按钮（如 <button></button> 或带 role="button" 的 <div>）必须是可聚焦的（原生 <code><button></button> 默认可聚焦）
• 下拉菜单容器（如 <div class="dropdown-menu">）本身不需要 <code>tabindex，但它的子元素（如 <a></a>、<button></button>）必须是原生可聚焦元素，或显式添加 tabindex="0"
• 避免把菜单内容包在 <div tabindex="-1"> 里——<code>tabindex="-1" 仅允许 JS 主动聚焦，无法被 Tab 键自然进入

  示例结构：

  <div class="dropdown">
    <button aria-expanded="false" aria-haspopup="true">菜单</button>
    <div class="dropdown-menu">
      <a href="#item1">选项一</a>
      <a href="#item2">选项二</a>
      <button type="button">操作按钮</button>
    </div>
  </div>

  核心 CSS 写法与常见陷阱 核心逻辑是：默认隐藏菜单，当 .dropdown 处于 :focus-within 状态时显示它。

  正确写法：

  

  CSS婚礼策划服务机构宣传网站模板

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

  下载

  .dropdown-menu {
    display: none;
  }
  .dropdown:focus-within .dropdown-menu {
    display: block;
  }

  容易踩的坑：

  • .dropdown-menu:focus-within ❌ —— 错！这是检测菜单自己或其后代聚焦，但菜单默认不可聚焦，且用户焦点通常落在菜单项上，不是菜单容器
  • 只靠 :focus-within 不处理按钮的 aria-expanded 同步 ❌ —— 这属于可访问性缺陷，视觉状态和语义状态脱节，屏幕阅读器无法感知展开状态
  • 没加过渡动画却直接用 display 切换 ❌ —— display 无法过渡，会导致突兀闪现；如需动画，改用 opacity + visibility 或 transform，并确保 :focus-within 触发的是同一组属性

  键盘操作与可访问性补漏要点 :focus-within 让键盘用户能停留菜单，但还差几步才能真正可用：

  • 触发按钮需监听 Enter 和 Space 键展开/收起菜单，并同步更新 aria-expanded
  • 菜单展开后，首次 Tab 应跳入第一个可聚焦子项（不是菜单容器），可通过 .dropdown-menu a:first-child:focus 等微调顺序
  • 按 Escape 应收起菜单并把焦点移回触发按钮 —— 这必须用 JS 实现，:focus-within 本身不响应按键
  • 菜单关闭时机：不仅靠失焦，还要考虑点击菜单外区域、或 Tab 移出整个 .dropdown 容器后自动关闭（后者需 JS 监听 blur 延迟判断）

  纯 CSS 方案能解决“停留”问题，但完整可用的下拉菜单仍绕不开少量 JS 来处理焦点管理、ARIA 状态同步和 Escape 行为。别指望单靠 :focus-within 一劳永逸。