(JavaScript can toggle data-open ; CSS-only arrow change requires :focus-within plus sibling selectors — omitted for brevity.) For mobile, convert absolute positioning to full-width block:
.dropdown__trigger:focus-visible outline: 2px solid #3b82f6; outline-offset: 2px; dropdown css
.dropdown:hover .dropdown__menu, .dropdown:focus-within .dropdown__menu, .dropdown__menu:hover opacity: 1; visibility: visible; transform: translateY(0); (JavaScript can toggle data-open ; CSS-only arrow change
<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 position: relative; display: inline-block; (JavaScript can toggle data-open
.dropdown__menu li a:hover, .dropdown__menu li a:focus-visible background-color: #f1f5f9; outline: none;
.dropdown__menu li a display: block; padding: 0.5rem 1rem; color: #1e293b; text-decoration: none; transition: background 0.15s;