Adding a Dropdown Menu in WordPress
Dropdown means two unrelated things in WordPress: a nested navigation submenu, and a select list of categories or archives. Knowing which one you want saves the afternoon.
Two different things share the name. A dropdown menu is a navigation item that reveals child links on hover or tap. A dropdown list is an HTML select element, the kind used to jump to a category or a monthly archive. They are built in completely different places, and searching for one while needing the other is why this task takes longer than it should.
Dropdown submenus in a classic theme
Go to Appearance → Menus, add the items, then drag a child slightly to the right so it sits indented under its parent. The indentation is the nesting, and there is no separate submenu control.
Services
Web design
SEO
About
Contact
Save, and confirm the menu is assigned to a theme location. An unassigned menu exists in the database and appears nowhere, which is the single most common reason a new dropdown seems not to work. The full walkthrough for building menus is in creating a WordPress menu.
Dropdown submenus in a block theme
Block themes have no Menus screen. Navigation lives in a block, edited through Appearance → Editor, and the mechanics differ in ways that catch people out:
- Open the template or template part containing the Navigation block, usually the header.
- Select a link, then add a Submenu from the block toolbar, or drag a Page List item into another.
- In the block settings, choose whether submenus open on click rather than on hover.
Prefer open on click. Hover submenus have no equivalent on a touch screen, so the browser fakes it, and the fake behaviour is where the parent link becomes unreachable. Click also gives you keyboard operation for free.
The Navigation block additionally offers an overlay menu, which replaces dropdowns entirely below a chosen width. On a site with several submenus that is usually a better mobile answer than trying to make nested dropdowns work in a narrow column. The wider differences are covered in what is a WordPress block theme.
When the submenu does not appear
Work through these in order, because each is cheap to check:
| Symptom | Likely cause |
|---|---|
| No nested list in the page source | The child item was never indented, or the menu is unassigned |
| Nested list exists but is invisible | The theme styles one level only, or a parent has overflow: hidden |
| Submenu flashes and closes | A script conflict, often two menu scripts fighting |
| Works on desktop, not on touch | Hover-only CSS with no click fallback |
| Third level missing | Theme depth limit, either in the walker or the stylesheet |
If the whole menu is missing rather than just the dropdown, that is a different fault, covered in WordPress menu not showing. If it appeared only after installing something, isolate it as in fixing plugin conflicts.
Make it work on touch and with a keyboard
These two get skipped and then reported as bugs months later.
Touch. A dropdown that opens on hover has no reliable touch equivalent. Either switch to click, or use the theme's mobile menu below a breakpoint. Then check that a parent which is also a real page stays reachable: if the first tap only opens the submenu, repeat the parent as the first child, named something like "Services overview". Layout problems that only show on a phone are covered in a site not displaying correctly on mobile.
Keyboard. Tab to the parent, and the submenu should open on Enter or on focus, stay open while you tab through its children, and close on Escape. WordPress adds menu-item-has-children to parents, so you can style focus states without inventing classes. A dropdown reachable only with a mouse excludes people who do not use one.
Dropdown lists, the other meaning
A dropdown list is a select element. Two come with WordPress, and neither is in the Menus screen:
- Categories. Add the Categories block, then enable its Display as dropdown option. Visitors pick a category and jump to its archive.
- Archives. The Archives block has the same dropdown toggle, producing a month picker.
Both live in a sidebar or footer area, so on a classic theme you add them under Appearance → Widgets, as WordPress widgets describes, and on a block theme you place them directly in a template part.
For a dropdown that collects an answer rather than navigating, you want a select field in a form plugin, not a menu. That is a form-building job entirely separate from navigation.
Styling without breaking updates
Add a class to a single item through the CSS Classes field, then target it. Keep the rule in the Customizer's additional CSS or a child theme rather than the parent theme's stylesheet, per adding custom CSS to WordPress. Useful classes WordPress outputs on its own: menu-item-has-children on parents, current-menu-item on the active page, and current-menu-ancestor on the parent of the active page.
Resist restyling the dropdown's open and close behaviour with your own JavaScript. Themes already ship it, and a second script is the usual cause of a submenu that flickers.
Common mistakes
- Forgetting to assign the menu to a location. Nothing renders, and nothing explains why.
- Nesting three levels deep. Difficult with a mouse, unusable on a phone, unstyled in most themes.
- Hover-only dropdowns. They fail on every touch device.
- Leaving the parent unreachable. If it is a real page, make sure a visitor can still get there.
- Editing the parent theme's stylesheet. The next update reverts it.
- Confusing the two meanings. Hunting the Menus screen for a category dropdown finds nothing, because that control is a block setting.
Verify
Open the site logged out and hover the parent item, then load the same page on a phone and tap it. Confirm the submenu opens, the children are reachable, and the parent still goes somewhere if it should. Then tab through the navigation with the keyboard alone and check the submenu opens and closes. Finally, view source and confirm the dropdown is a nested list in the markup rather than something drawn by script after load.
Frequently asked
- Usually the theme only styles one level of nesting, or the menu was never assigned to a location. Check the assignment first, then create a test child item and look at whether the markup contains a nested list at all.
- In many themes on touch screens it cannot, because the first tap opens the submenu instead of following the link. The usual fix is to repeat the parent as the first child item so the destination stays reachable.
- Two at most. Third-level dropdowns are awkward with a mouse, close to unusable on touch, and most themes do not style them, so the third level often renders off-screen or behind other content.