How to Open Dropdown on Hover in Elementor?

Key Takeaways

  • The Plus Addons for Elementor allows the dropdown menu to open on hover using the Navigation Menu widget.
  • Users can select 'Hover Sub-Menu' from the Menu Hover/Click dropdown to enable hover functionality.
  • The Navigation Menu widget requires installation and activation of The Plus Addons for Elementor to function.
Table Of Content

Do you want to open the dropdown menu on hover in your Elementor menu? Opening the submenu on hover can improve the user experience by making it easier for users to check the dropdown menu.

With the Navigation Menu widget from The Plus Addons for Elementor, you can easily make the dropdown menu open on hover in your navigation menu.

To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, add the Navigation Menu widget to the header template and follow the steps –

Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it. 

1. Select the appropriate options from Menu Type and Menu Direction sections on the Layout tab.

2. Then select or create the menu, depending on the option selected in the Menu Type from the Content tab.

3. From the Menu Hover/Click dropdown, select Hover Sub-Menu

Navigation menu hover sub menu new how to open dropdown on hover in elementor? From the plus addons for elementor

You can select the appropriate effects for the dropdown menu from the Menu Effects dropdown.

Now, your dropdown menu will open on hover. 

Navigation menu hover sub menu demo

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the dropdown menu isn't opening on hover?

If the dropdown menu isn't opening on hover, ensure you've selected 'Hover Sub-Menu' from the Menu Hover/Click dropdown in the Content tab. This setting is crucial for enabling the hover effect. If the setting is correct but the issue persists, check if the Navigation Menu widget from The Plus Addons for Elementor is properly installed and activated.

Can I use the hover dropdown feature with other page builders?

The hover dropdown feature is exclusive to the Navigation Menu widget from The Plus Addons for Elementor, which works only with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can enhance user experience by implementing this feature.

What are the best settings for a dropdown menu in Elementor?

For optimal performance of your dropdown menu, select the appropriate options from the Menu Type and Menu Direction sections on the Layout tab. Additionally, choosing effects from the Menu Effects dropdown can enhance the visual appeal. These settings can significantly improve user interaction with your navigation menu.

How do I create a header template for the dropdown menu?

To create a header template for your dropdown menu, you can use either the free Nexter Builder or Elementor Pro. This flexibility allows you to design a custom header that integrates seamlessly with the Navigation Menu widget from The Plus Addons for Elementor, ensuring your dropdown functions as intended.

Last reviewed: April 10, 2026