--- title: "How to Open Elementor Submenu Dropdown on Hover for Free?" url: https://theplusaddons.com/docs/open-elementor-submenu-dropdown-on-hover-for-free/ date: 2023-10-27 modified: 2026-09-16 lang: en author: "Aditya Sharma" description: "A hover dropdown opens as soon as the cursor reaches a parent menu item, with no click. It is what most desktop visitors expect from a site header. The free..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Elementor-Submenu-Dropdown-on-Hover-for-Free_-1024x536.jpg word_count: 867 --- # How to Open Elementor Submenu Dropdown on Hover for Free? ## - Navigation Menu Lite in The Plus Addons for Elementor includes a Menu Hover/Click setting that opens a dropdown submenu on hover when Hover Sub-Menu is selected. - The Plus Addons for Elementor makes Navigation Menu Lite free to use for this setting, and no Pro upgrade is required. - Menu Effects offers multiple animation styles, including fade and slide, while the hover or click trigger stays separate from the reveal transition. - Hover Sub-Menu works with any Menu Direction, any WordPress menu source, and desktop-first navigation, but touch devices still require a tap because there is no true hover on touchscreens. A hover dropdown opens as soon as the cursor reaches a parent menu item, with no click. It is what most desktop visitors expect from a site header. The free **Navigation Menu Lite** widget in The Plus Addons for Elementor does this with one setting, **Menu Hover/Click**. It is the default, so usually you are confirming it rather than changing it. *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. Without a child item there is nothing for the hover to open. ## 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.)- Choose a **Menu Direction**. Hover submenus work with both the horizontal and the vertical picture option.- Open the **Extra Options** section and set **Menu Hover/Click** to **Hover Sub-Menu**. ![The Extra Options section of Navigation Menu Lite with Menu Hover/Click set to Hover Sub-Menu](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-hover.webp) - Back in **Navigation Bar**, pick a **Menu Effects** style for the reveal. **Style 1** slides the panel down, **Style 2** fades it in.- Update the page and hover a parent item on the front end. The submenu opens under the cursor and closes when you move away. ![Published page with the cursor on Services and its submenu open, showing Web Design, SEO and Branding](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-result-submenu.webp) ![The submenu opening and closing as the cursor moves across the menu](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-hover-sub-menu-demo.gif) ## Settings Used Here | Setting | Where | What it does | Default | | ------- | ----- | ------------ | ------- | | **Menu Hover/Click** | Content > Extra Options | **Hover Sub-Menu** opens a dropdown when the cursor enters the parent item; **Click Sub-Menu** needs a click instead. | Hover Sub-Menu | | **Menu Effects** | Content > Navigation Bar | **Style 1** slides the dropdown open, **Style 2** fades it in. | Style 1 | | **Main Menu Indicator Style** | Style > Main Menu | Adds an arrow to items that have a submenu, so visitors know where to hover. | None | ## How It Behaves - The dropdown opens on mouse-enter and closes on mouse-leave. Nothing stays open after the cursor leaves the item.- **Menu Effects** changes only the animation. It does not change whether hover or click opens the panel.- The setting applies to the whole widget. Every parent item in that menu behaves the same way.- Touch devices have no hover, so on a phone or tablet a tap opens the submenu whatever this setting says. If you want the same behaviour on desktop, use [Click Sub-Menu](https://theplusaddons.com/docs/open-elementor-submenu-dropdown-on-click-for-free/) instead. ## Limitations - You cannot set hover on some items and click on others in the same widget.- Hover only starts working above 991 px of browser width. That number is fixed in the widget and is not the same as **Open Mobile Menu**, so lowering the breakpoint leaves a range of widths with no working dropdown at all.- There is no hover delay setting. The submenu opens and closes immediately with the cursor. ## Troubleshooting ### Nothing opens when I hover Check that the item actually has children under **Appearance > Menus** — a child item is indented under its parent. Then check the browser width: below 992 px the hover script does not run. ### The dropdown works on a wide screen but not on a narrow laptop This is the 991 px limit above. If you have lowered **Open Mobile Menu** to, say, 768 px, then between 769 and 991 px the desktop bar is shown but no dropdown opens. Leave **Open Mobile Menu** at 991 or higher. ### The submenu closes while I move towards it A gap between the parent item and the dropdown breaks the cursor's path. Reduce the top padding or margin on the submenu under **Style > Sub Menu** so the two touch. ### Visitors cannot tell which items have a dropdown Set **Main Menu Indicator Style** to **Style 1** under **Style > Main Menu**. It is **None** by default. ## Related Docs - [How to Open Elementor Submenu Dropdown on Click for Free?](https://theplusaddons.com/docs/open-elementor-submenu-dropdown-on-click-for-free/)- [Navigation Menu Lite Widget Settings Overview](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/)- [How to Create a Vertical Navigation Menu in Elementor for Free?](https://theplusaddons.com/docs/create-a-vertical-navigation-menu-in-elementor-for-free/)