---
title: "How to Open Dropdown on Click in Elementor?"
url: https://theplusaddons.com/docs/open-dropdown-on-click-in-elementor/
date: 2023-10-27
modified: 2026-09-01
lang: en
author: "Aditya Sharma"
description: "Are you looking to open the dropdown menu on click on your Elementor menu? Opening the dropdown menu on hover will not work on mobile, so opening the dropdown menu..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Dropdown-on-Click-in-Elementor_-1024x536.jpg
word_count: 817
---

# How to Open Dropdown on Click in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget changes submenu trigger from mouse hover to Click Sub-Menu, so the dropdown opens on a mouse or tap click instead of hover.
- Click Sub-Menu makes dropdowns reachable on touch devices, because hover does not exist on touchscreens and mobile or tablet visitors can otherwise miss submenu links.
- Menu Hover/Click applies to the whole widget instance, and it cannot mix hover on some items and click on others in the same widget.
- Menu Effects still applies in Click Sub-Menu mode, and the widget works with Menu Type, Menu Direction, and Content tab settings that define the menu items.

Are you looking to open the dropdown menu on click on your Elementor menu? Opening the dropdown menu on hover will not work on mobile, so opening the dropdown menu on click makes sure it works on all devices.

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

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).*

***Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed and activated.***

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

Table Of Contents

## What It Does

The Navigation Menu widget's Menu Hover/Click control lets you switch a submenu's trigger from opening on mouse hover to opening on a mouse or tap click, using the widget's own Click Sub-Menu option.

## Why It Matters

Hover does not exist as an interaction on touchscreens, so a dropdown that only opens on hover can leave mobile and tablet visitors unable to reach submenu links at all. Switching the trigger to click makes the same dropdown reachable with a tap, on every device.

## What You Get

A dropdown submenu that opens when a visitor clicks (or taps) the parent menu item, instead of when their cursor hovers over it, using the same Content and Style setup as the rest of your Navigation Menu widget.

## Benefits

- Makes dropdown submenus usable on touch devices where hover does not apply
- A single dropdown control, no separate mobile-only menu setup required
- Pairs with the widget's Menu Effects dropdown, so the visual transition still applies on click

## Capabilities

- Menu Hover/Click dropdown with two options, Hover and Click Sub-Menu
- Menu Effects dropdown to choose the transition effect for how the dropdown appears/disappears
- Applies to the whole widget instance, both horizontal and vertical menu directions
- Works together with Menu Type and Content tab settings that define the actual menu items

## How It Works

Menu Hover/Click adds a CSS class to the menu wrapper (a hover-based class or a click-based class) that determines which browser event opens a submenu. In Hover mode, the submenu opens on `mouseenter`/`mouseleave`. In Click Sub-Menu mode, it opens on a click event instead, and typically needs a second click (or a click outside) to close, since there is no cursor-leave event to rely on for touch input.

## How to Use It

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 **Click Sub-Menu**.

![Click Sub-Menu option selected in the Navigation Menu widget](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-click-sub-menu-new.png)Selecting Click Sub-Menu from the Menu Hover/Click dropdown

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

Now, your dropdown menu will open with a mouse click.

![Dropdown submenu opening after a click on the parent menu item](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-click-sub-menu-demo.gif)Dropdown submenu opening on click on the live front end

## Use Cases

- Mobile-heavy traffic sites where hover-only dropdowns leave a large share of visitors unable to open submenus
- Multi-level or mega menus where a hover trigger risks accidentally closing the panel while the cursor moves across it
- Sites that want consistent tap behavior for dropdowns across desktop and touchscreen visitors

## Limitations

- Menu Hover/Click is one setting for the whole widget instance; you cannot mix hover on some items and click on others in the same widget
- Switching to Click Sub-Menu changes the interaction for desktop mouse users too, hover will no longer open the dropdown
- The dropdown still needs a link or parent item that visitors will actually click; a parent item styled only as plain text with no submenu indicator can make the click target less obvious

## Troubleshooting

- **Dropdown used to work and has stopped opening at all.** Confirmed via a real support ticket where a mega dropdown stopped showing on a live site: check for a theme or plugin update, caching plugin, or JS/CSS minification change around the time it broke, since these commonly conflict with menu scripts; clearing page cache and testing with other plugins temporarily disabled is the fastest way to isolate the cause.
- **Switched to Click Sub-Menu but the dropdown still opens on hover.** Clear any full-page or browser cache after saving; also check for a child theme or custom CSS/JS overriding the menu's hover behavior.
- **Dropdown opens on click but will not close again.** This is expected touch-friendly behavior in Click Sub-Menu mode, click the parent item again or click elsewhere on the page to close it; there is no separate auto-close timer setting.

Suggested reading, [8 best mega menu examples + learn how to create them.](https://theplusaddons.com/blog/best-mega-menu-examples/)

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