--- title: "How to Open Elementor Submenu Dropdown on Click for Free?" url: https://theplusaddons.com/docs/open-elementor-submenu-dropdown-on-click-for-free/ date: 2023-10-27 modified: 2026-09-16 lang: en author: "Aditya Sharma" description: "A click-to-open dropdown stays shut until a visitor asks for it. It behaves the same on a desktop mouse and on a touchscreen, and it stops submenus appearing every time..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Elementor-Submenu-Dropdown-on-Click-for-Free_-1024x536.jpg word_count: 881 --- # How to Open Elementor Submenu Dropdown on Click for Free? ## - Navigation Menu Lite de The Plus Addons for Elementor cambia el comportamiento del submenú de hover a Click Sub-Menu, para que el submenú solo se expanda cuando el visitante toca o hace clic en el elemento padre. - The Plus Addons for Elementor ofrece esta opción en la versión gratuita de Navigation Menu Lite, sin necesidad de Pro, y usa el mismo menú de WordPress gestionado en Appearance > Menus. - Menu Effects separa la animación de apertura del disparador, mientras Menu Hover/Click controla si el submenú abre con hover o con clic. - Click Sub-Menu resuelve el problema del hover accidental y mantiene un comportamiento consistente en desktop, tablet y mobile, pero al activarlo el primer clic abre el submenú y no navega a la página padre. A click-to-open dropdown stays shut until a visitor asks for it. It behaves the same on a desktop mouse and on a touchscreen, and it stops submenus appearing every time the cursor drifts across the header. The free **Navigation Menu Lite** widget in The Plus Addons for Elementor switches to this with one setting, **Menu Hover/Click**. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu Lite widget, [click here](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's 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) Table Of Contents ## Before You Start - **Edition:** **Free** — Navigation Menu Lite is part of the free The Plus Addons for Elementor plugin. Every setting described here, including **Menu Content > Template Menu**, works without the Pro plugin; this was checked with Pro deactivated.- **Not the same widget as Navigation Menu:** **Navigation Menu** is a separate widget in The Plus Addons for Elementor Pro. It is the one with mega menus, a sticky header menu, off-canvas and swiper mobile menus and per-item icons and labels. Navigation Menu Lite has none of those. If the panel header says **Edit Navigation Menu Lite**, this is the free widget. The LIVE WIDGET button above opens the Pro Navigation Menu demo, since the Lite widget has no demo page of its own.- **Widget to enable:** **TP Navigation Menu Lite**, switched on under **The Plus Addons > Widgets**. In the Elementor panel it appears as **Navigation Menu Lite**.- **You need a WordPress menu:** build it first under **Appearance > Menus**. The widget does not hold menu items of its own, it renders a menu you have already created. On a block theme (such as Twenty Twenty-Five) WordPress hides **Appearance > Menus**; open **/wp-admin/nav-menus.php** directly, or use a classic theme, or build the menu in the Site Editor instead.- **Your menu needs at least one submenu:** under **Appearance > Menus**, drag an item slightly to the right under another item so it becomes a child. ## Steps - Select the **Navigation Menu Lite** widget and open the **Navigation Bar** section. Leave **Menu Type** on **Default** and pick your menu in **Select Menu**. (**Menu Type** chooses between a WordPress menu and a repeater — it is not where you pick the menu.)- Open the **Extra Options** section and set **Menu Hover/Click** to **Click Sub-Menu**. ![The Extra Options section of Navigation Menu Lite with Menu Hover/Click set to Click Sub-Menu](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-click.webp) - Under **Style > Main Menu**, set **Main Menu Indicator Style** to **Style 1**. Without an arrow nothing tells a visitor that an item is clickable for a dropdown.- Update the page and click a parent item on the front end. The submenu slides open and stays open until you click the item again or click anywhere outside the menu. ![Published page with the Services submenu open after a click, showing Web Design, SEO and Branding](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-result-submenu.webp) ![The submenu opening on a click and staying open](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-click-sub-menu-demo.gif) ## Settings Used Here | Setting | Where | What it does | Default | | ------- | ----- | ------------ | ------- | | **Menu Hover/Click** | Content > Extra Options | **Click Sub-Menu** opens a dropdown on a click and keeps it open; **Hover Sub-Menu** opens it with the cursor. | Hover Sub-Menu | | **Main Menu Indicator Style** | Style > Main Menu | Adds an arrow to items that have a submenu, so visitors know what to click. | None | > ***Menu Effects** does nothing in this mode. Both of its styles are read only by the hover code, so with **Click Sub-Menu** the panel always slides open over about 0.4 seconds whichever style is selected.* ## How It Behaves - Clicking a parent item opens its submenu. Clicking the same item again closes it.- Opening one dropdown closes any other dropdown that was open in the same menu.- Clicking anywhere outside the menu closes the open dropdown.- A parent item that has children never navigates to its own link, on any click. The widget cancels the link so that the click can open the panel instead.- The setting applies to the whole widget, not to individual menu items. ## Limitations - You cannot mix click-opening and hover-opening items in one widget.- The parent item's own page becomes unreachable from the menu. Add it as the first link inside its own submenu — an "Overview" or "All Services" entry — if visitors need to get there.- **Menu Effects** has no effect here, so the open and close animation cannot be changed.- There is no setting to keep a dropdown open on the page its child item points to. ## Troubleshooting ### Clicking Services opens the dropdown instead of loading the Services page That is how this mode works, and a second click will not navigate either — it closes the panel. Put the parent page in its own submenu as an explicit link, or switch that item to have no children. ### Nothing happens when I click Check that the item has child items under **Appearance > Menus**. An item with no children is a plain link and keeps working as one. ### The dropdown opens and closes again immediately Another script on the page is handling the same click. Disable other menu, popup or animation plugins one at a time to find it, and clear any page or CSS cache between tests. ### It works on a wide screen but not on a narrow one Dropdowns only run above 991 px of browser width. If you lowered **Open Mobile Menu** below 991, the widths in between show the desktop bar with no working dropdown. Keep **Open Mobile Menu** at 991 or higher. ## Related Docs - [How to Open Elementor Submenu Dropdown on Hover for Free?](https://theplusaddons.com/docs/open-elementor-submenu-dropdown-on-hover-for-free/)- [Navigation Menu Lite Widget Settings Overview](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/)- [How to Create an Elementor Hamburger Toggle Menu for Mobile for Free?](https://theplusaddons.com/docs/create-an-elementor-hamburger-toggle-menu-for-mobile-for-free/)