WordPress Dropdown Menu Not Working? Fix the Cause

WordPress dropdown menu not working? Diagnose missing submenus, mobile tap problems, CSS clipping and stacking, form selects, and WooCommerce variations.

Updated Oct 22, 2026 3 min read
On this page
  1. When a saved submenu still does not work
  2. Check the cause before changing CSS
  3. What is a dropdown in WordPress?
  4. 1. How to create a dropdown menu in WordPress navigation
  5. Classic themes (Appearance → Menus)
  6. Block themes (Site Editor)
  7. 2. How to create a dropdown list inside a form
  8. Using HTML (no plugin required)
  9. Using a form plugin
  10. 3. WooCommerce dropdown (product variations)
  11. 4. WordPress dropdown menu not working: CSS checks
  12. Fix hidden dropdown (z-index issue)
  13. Make dropdown open on click instead of hover
  14. Do you need a WordPress dropdown menu plugin?
  15. FAQ
  16. Explore WordPress dropdown troubleshooting guides

When a saved submenu still does not work

A submenu behind another element may have a stacking problem. Raising its <code>z-index</code> alone may fail if an ancestor creates a separate stacking context.

Check the cause before changing CSS

A container with <code>overflow: hidden</code> can instead clip the submenu. Check parent containers before editing either property. Test CSS changes on a staging site or after a backup: a rule that exposes the desktop submenu may affect the mobile header.

If your WordPress dropdown menu is not working, first identify the symptom: is the submenu missing, hidden behind content, or impossible to open on a phone?

Those failures have different fixes, and none necessarily requires a plugin.


What is a dropdown in WordPress?

A navigation dropdown is a submenu beneath a parent menu item. Its position comes from menu settings; how it appears and opens depends on the theme or Navigation block.

  • Missing submenu? Check its parent and menu placement.
  • Visible but unusable? Check CSS and tap behaviour.

A form selection field and a WooCommerce variation selector may also look like dropdowns, but they are separate controls. Check which one fails before editing your header.


1. How to create a dropdown menu in WordPress navigation

For troubleshooting, confirm that the intended submenu exists before changing its appearance. Then check the published page, not just the editor preview. If you need setup steps rather than a repair, see the dropdown list guide.

Classic themes (Appearance → Menus)

  1. Open Appearance → Menus.
  2. Check that the child item is indented beneath its parent.
  3. Save the menu after correcting its position.
  4. Check the assigned display location; the header may use another menu.

Block themes (Site Editor)

  1. If Appearance → Menus is absent, open Appearance → Editor → Navigation.
  2. Confirm that the header’s Navigation block uses the intended menu.
  3. Save the template part.
  4. Test the live page; creating a menu does not place it in a displayed header automatically.

2. How to create a dropdown list inside a form

If the broken control is inside a form, changing navigation settings will do nothing. Check whether its options exist and whether a selection can be submitted. Test the published form as a visitor; if it works only in the editor, investigate its configuration and caching.

Using HTML (no plugin required)

For a hand-coded form, inspect the <select> element and its <option> entries. An empty selector needs options, not menu CSS. Check its name attribute too: without one, the selected value will not be included in a standard form submission.

Using a form plugin

Open the field in your form plugin and check its choices and required-field setting. Save the form, then confirm the page displays the updated version. If another page works, compare the two field configurations before changing the theme.


3. WooCommerce dropdown (product variations)

A missing variation choice belongs to the variable product, not the site menu.

  1. Check that the product has attributes used for variations.
  2. Check that the intended variations exist.
  3. Save the product.
  4. Test an available combination on its published page.

An unavailable combination should not be treated as a navigation failure.


4. WordPress dropdown menu not working: CSS checks

When the submenu exists but is hard to see or reach, test with a mouse, keyboard and phone. Note whether it never opens, opens behind content, or disappears when you move toward it. Clear relevant caches after confirming the menu settings. Inspect the theme’s styles before adding CSS: those symptoms do not share one universal fix.

Fix hidden dropdown (z-index issue)

Make dropdown open on click instead of hover

In a block theme, check the Navigation block’s submenu visibility and mobile overlay settings. Try the submenu arrow separately from the parent link.

A tap on the parent text may follow its link rather than open its children. Verify actual phone behaviour instead of assuming desktop hover will translate to touch.


Do you need a WordPress dropdown menu plugin?

Usually not. WordPress supports submenus; verify the saved menu, header placement, interaction settings and theme CSS first.

If the fault persists, test theme or plugin conflicts cautiously on a staging site. The theme deactivation guide explains the theme side of that check, while WordPress consultation is an option when you need help isolating it.


Before installing a dropdown plugin, check the cause:

  • WordPress already supports submenus
  • Check that the intended menu appears in the header
  • Test mobile taps and submenu toggles
  • Inspect clipping and stacking before adding CSS
Still need help? Contact us!

FAQ

Explore WordPress dropdown troubleshooting guides

Related guides