Dropdown Menu won't stay open on hover

Hello. I am having trouble with the dropdown menus in my navbar. The ‘services’ tab is fully set up with all the animations and whatnot, but when I go to hover over the icon, and then hover to select one of the dropdown menu items, it disappears before I can select one. I would assume it’s because the trigger is not being hovered over when I move the cursor down, but I don’t know exactly how to fix this. Any help would be greatly appreciated. Thanks!

Read Only for My Website:

https://preview.webflow.com/preview/jacks-fantabulous-site-d1e37a?utm_medium=preview_link&utm_source=designer&utm_content=jacks-fantabulous-site-d1e37a&preview=92fb6bd52b768ada5026f782d9a2ad56&workflow=preview


Here is my public share link: LINK
(how to access public share link)

Hey! So your setup is close but not quite right.

First, you’ll need to remove the hover interactions (HoverOn / HoverOff) from the Dropdown Toggle element. Instead, you want to add these to the Dropdown element, itself (so the parent of the dropdown toggle and the dropdown list elements). This Dropdown element is currently named ‘nav’ in your project.

Next, you’ll want to change the HoverOn / Hover off interactions just slightly. They are currently set to affect ‘Only siblings with this class’. You want to change that to ‘Only children with this class’.

1 Like

Worked! Thanks a lot!

Hey there, thanks for this. Can you explain where the HoverOn / Hover off interactions are in the settings?

Every time I toggle the ‘Hover on Open’ setting on the Dropdown Element, it also toggles automatically on the Dropdown Toggle Element. Thanks for your time!!