:focus-within

A dropdown a keyboard can hold open

CaveatHover-only menus lock keyboards out; :focus-within keeps the panel open while anything inside it holds focus, so Tab walks straight through. Two traps: the menu snaps shut the instant focus leaves, and a pixel of empty space between trigger and panel breaks the hover path — bridge the gap with padding on the panel, never margin. Hide it with visibility, not display, so the tab from trigger to first item has something to land in.

FallbackKeep :hover alongside: iOS Safari does not hand buttons focus on tap, so a focus-only menu never opens on touch. For anything holding forms or many items, graduate to a real disclosure with aria-expanded.

<div class="menu">
  <button>Workspace</button>
  <ul>
    <li><a href="#">Settings</a></li>
  </ul>
</div>

.menu { position: relative; }

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  /* the bridge over the gap: padding,
     never margin, or hover has a hole */
  padding-top: 8px;
  /* not display: the tab out of the
     trigger needs somewhere to land */
  visibility: hidden;
}

/* open while anything inside has focus */
.menu:hover ul,
.menu:focus-within ul { visibility: visible; }

Published 21 Aug 2026