---
title: "How to Open Dropdown on Hover in Elementor?"
url: https://theplusaddons.com/docs/open-dropdown-on-hover-in-elementor/
date: 2023-10-27
modified: 2026-04-10
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Dropdown-on-Hover-in-Elementor_-1024x536.jpg
word_count: 235
---

# 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.

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](/docs/navigation-menu-widget-settings-overview/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* 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**. 

![](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-hover-sub-menu-new.png)

Suggested reading, how to [create a sticky menu in Elementor.](https://theplusaddons.com/docs/create-a-sticky-menu-in-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](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-hover-sub-menu-demo.gif)

Also, read [how to open dropdown on click in Elementor](https://theplusaddons.com/docs//open-dropdown-on-click-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the dropdown menu isn't opening on hover?**
A: 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.

**Q: Can I use the hover dropdown feature with other page builders?**
A: 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.

**Q: What are the best settings for a dropdown menu in Elementor?**
A: 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.

**Q: How do I create a header template for the dropdown menu?**
A: 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.