<div class="dropdown"> <button class="dropdown__trigger" aria-expanded="false" aria-haspopup="true"> Menu <span class="dropdown__arrow">▼</span> </button> <ul class="dropdown__menu" role="menu"> <li role="menuitem"><a href="#">Profile</a></li> <li role="menuitem"><a href="#">Settings</a></li> <li role="menuitem"><a href="#">Logout</a></li> </ul> </div>
.dropdown-menu /* Tether the bottom of the menu to the top of the button */ position-anchor: --my-anchor; bottom: anchor(top); left: anchor(left); dropdown css
If you move your mouse away from the menu, it closes (because of :hover ). But if you are navigating via , once you Tab past the last item in the list, the menu closes and focus is lost . Note: As of late 2024, this is supported
: Usually a , , or that the user interacts with. Note: As of late 2024
Note: As of late 2024, this is supported in Chrome and Edge, with Safari support in progress. You should use @supports as a fallback.
.dropdown[data-open="true"] .dropdown__arrow transform: rotate(180deg);
CodePen-like snippet — copy the HTML/CSS blocks above into a single file to see a working dropdown.