How to Open WordPress Menu Dropdown on Hover?

Hover dropdowns let desktop visitors scan sub-pages quickly just by moving the pointer over a menu item.

The free Navigation Menu block in Nexter Blocks opens dropdowns on hover by default.

For every Navigation Menu setting in one place, see the Navigation Menu block guide.

Before You Start

• Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
• Block to enable: Navigation Menu, switched on under Nexter > Blocks in your WordPress dashboard.
• A menu with sub-items: Manual Menu items at 1 Level, or a WordPress menu with child items (Pro).

Steps

1. Add the Navigation Menu block to your header template and set up your menu items.

2. In Navigation Content, set Submenu Open to On Hover.

3. Pick a Submenu Transition: Slide Up (JS), Fade In (JS), Slide Up or Fade In. Save.

How It Behaves

• The dropdown stays hidden until the pointer moves over the parent item, then opens with the chosen transition.
• It works the same for Manual Menu and WordPress Menu, in the free plugin and with Pro.

Limitations

• Touch screens have no hover. Turn on the Responsive Mobile Menu for phones, or use On Click.

Troubleshooting

The dropdown does not open

Check that the sub-items are directly below their parent and set to a higher Menu Level, such as 1 Level.

Related Docs

• Navigation Menu block: all settings
• Open dropdowns on click
• Create a mega menu