--- 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-09-11 lang: en author: "Aditya Sharma" description: "Do you want your dropdown menus to open as soon as visitors point at them? Opening on hover is what most desktop visitors expect, and it saves them a click...." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Dropdown-on-Hover-in-Elementor_-1024x536.jpg word_count: 480 --- # How to Open Dropdown on Hover in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget opens dropdowns on hover by default, and the Menu Hover/Click setting is already set to Hover Sub-Menu. - Menu Effects offers Slide Up/Down (JS), Fade In/Out (JS), and CSS fade options, while Vertical Menu falls back to Slide Up/Down for the non-JS effects. - Hover only runs on screens wider than 991px, and touch screens always open submenus with a tap instead of hover. Do you want your dropdown menus to open as soon as visitors point at them? Opening on hover is what most desktop visitors expect, and it saves them a click. With the Navigation Menu widget from The Plus Addons for Elementor, dropdowns open on hover by default, and you can choose how they appear. *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'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:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free plugin has a simpler widget, **Navigation Menu Lite**, which also has this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type. ## Step 1: Set up the menu Add the Navigation Menu widget to your header. In **Layout**, choose the **Menu Type** and the **Menu Direction**, then pick or build your menu in **Content**. ## Step 2: Choose Hover Sub-Menu In **Content**, set **Menu Hover/Click** to **Hover Sub-Menu**. It is already the default. ![Menu Hover/Click set to Hover Sub-Menu in the Content section](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-menu-hover-click-set-to-hover-sub-menu-in-the-content-section.webp) ## Step 3: Pick an effect **Menu Effects**, just below, decides how the dropdown appears: - **Slide Up/Down (JS)** — the default; the dropdown slides open.- **Fade In/Out (JS)** — the dropdown fades in.- **Fade Up/Down** and **Fade In/Out** — CSS fades. > *With a **Vertical Menu**, only the two JS effects are used; the others fall back to Slide Up/Down.* ![The Menu Effects dropdown under Menu Hover/Click](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-menu-effects.webp) Publish and move your mouse over a menu item that has a submenu. ![A dropdown opening on hover on the published page](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-hover-sub-menu-demo.gif) ## Limitations - **Hover only runs on screens wider than 991px.** Narrower screens normally get the mobile menu, so this rarely shows. But if you lower **Mobile Menu > Open Mobile Menu**, tablets between that width and 991px get the desktop menu and its dropdowns do not open. Keep Open Mobile Menu at 991px or more, or use [Click Sub-Menu](https://theplusaddons.com/docs/open-dropdown-on-click-in-elementor/).- **One setting per widget.** You cannot mix hover and click in the same menu.- **Touch screens have no hover.** The mobile menu always opens submenus with a tap. ## Troubleshooting ### The dropdown does not open Check the page on a window wider than 991px, and look in the browser console for JavaScript errors from another plugin. Clear any cache or JavaScript optimisation after changing the setting. ### The dropdown closes before I reach it The dropdown closes as soon as the mouse leaves the menu item and its dropdown. If you added spacing between the two, reduce it, or switch to Click Sub-Menu. ## Related Docs - [Navigation Menu widget: settings overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/)- [Open the dropdown on click](https://theplusaddons.com/docs/open-dropdown-on-click-in-elementor/)- [Create a mega menu](https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/) ## Frequently Asked Questions **Q: Why won’t the dropdown open on hover in Elementor?** A: Hover only works on screens wider than 991px, so the first thing to check is whether you’re testing on a desktop-sized window. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also notes that JavaScript errors from another plugin can block the behavior, and cache or JavaScript optimization may need clearing after a setting change. If the page is being viewed on a narrower screen, the mobile menu usually takes over instead. **Q: What do I need before I can open a dropdown on hover in Elementor?** A: The Navigation Menu widget is part of The Plus Addons for Elementor Pro, and it needs to be installed and activated first. You also need the widget enabled under The Plus Addons > Widgets, plus a header template so the menu appears across the site. If you use the Default menu type, a WordPress menu under Appearance > Menus is also required. That setup matters because the hover behavior lives inside the header menu, not as a standalone page element. **Q: Should I use hover or click for submenu navigation?** A: Hover is the better fit for desktop menus when you want visitors to open submenus without an extra click, but it only works on screens wider than 991px. The page also says you cannot mix hover and click in the same menu, so this is a real design choice rather than a per-item toggle. If your audience uses touch devices or smaller screens heavily, Click Sub-Menu is the safer fallback because touch screens have no hover. **Q: Why does my dropdown close before I can move into it?** A: That usually happens when there is spacing between the parent menu item and its dropdown. The dropdown closes as soon as the mouse leaves both areas, so even a small gap can break the interaction. Reducing that spacing helps keep the pointer inside the active zone longer. If you want to avoid that hover sensitivity entirely, switching to Click Sub-Menu removes the mouse-travel problem. **Q: What hover animation effects are available for Elementor dropdown menus?** A: The Navigation Menu widget gives you four effect options for how the dropdown appears: Slide Up/Down (JS), Fade In/Out (JS), Fade Up/Down, and Fade In/Out. Slide Up/Down is the default, while the CSS-based fade options behave differently from the JavaScript ones. With a Vertical Menu, only the two JS effects are used and the other effects fall back to Slide Up/Down, so vertical layouts have fewer animation choices. **Q: Does hover dropdown navigation work on mobile or tablets?** A: Touch screens do not support hover, so mobile menus always open submenus with a tap. The page also says hover only runs on screens wider than 991px, which means narrower devices normally get the mobile menu instead. One edge case is tablets between your Mobile Menu setting and 991px: if Open Mobile Menu is set too low, they can get the desktop menu but still won’t get hover behavior.