# Open Dropdown Menus With the Keyboard

> Shows a classic theme's dropdown submenu while a keyboard user tabs through it, for themes whose dropdowns only open on mouse hover.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: menus, keyboard, accessibility, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-dropdown-keyboard-access/

## Code

```css
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
#site-navigation .menu-item-has-children:focus-within > .sub-menu,
nav .menu-item-has-children:focus-within > .sub-menu {
    display: block;
    left: auto;
    opacity: 1;
    visibility: visible;
    clip: auto;
    pointer-events: auto;
}
```

## Notes

Adjust the selector if your theme's menu is not inside .main-navigation, #site-navigation or nav.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Open Dropdown Menus With the Keyboard" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/