---
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-06-29
lang: en
author: "Aditya Sharma"
description: "The Navigation Menu widget in The Plus Addons for Elementor lets you open the dropdown submenu on hover. When the submenu opens on hover, visitors can browse menu items faster..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Dropdown-on-Hover-in-Elementor_-1024x536.jpg
word_count: 320
---

# How to Open Dropdown on Hover in Elementor?

## 

- Utilizes the Navigation Menu widget from The Plus Addons for Elementor to enable dropdown menus on hover.
- Requires installation and activation of The Plus Addons for Elementor to access the hover feature.
- Instructs users to configure Menu Type, Menu Direction, and select Hover Sub-Menu in the Layout and Content tabs.

The Navigation Menu widget in The Plus Addons for Elementor lets you open the dropdown submenu on hover. When the submenu opens on hover, visitors can browse menu items faster without needing to click.

With the Navigation Menu widget from The Plus Addons for Elementor, you can configure the dropdown to 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/).*

**Best Used For:**

- Navigation-heavy websites and agencies that use multi-level menus and need submenus to appear on hover for faster browsing

- Portfolio and service sites where desktop visitors expect a standard hover-to-open dropdown navigation experience

- Corporate and SaaS websites that prefer hover-triggered menus to reduce click depth in the header navigation

***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 below.

> *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** on the **Layout** tab. The menu type determines whether you are building a standard horizontal menu or a vertical side menu.

2. On the **Content** tab, select or create the menu based on the option you selected in **Menu Type**.

3. From the **Menu Hover/Click** dropdown, select **Hover Sub-Menu**. This setting changes the submenu trigger from click to hover.

![](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/)

From the **Menu Effects** dropdown, select the visual effect for the dropdown menu. Options range from a simple fade to slide-down and other animated transitions.

Your Elementor dropdown menu will now 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/).