Help on keeping the dropdown open after hovering on it

Hi there! A bit of a beginner here.

I have a problem with some dropdowns nested inside a Navbar. I have attached the link, the dropdown in question is the second one.

When hovering over it, it opens - as well as the ones nested inside. But when clicking on those 2 nested dropdowns or when trying to hover on the other links inside the first dropdown, it closes.

How can this be changed to work? It is because of the interactions? How can I make it not close after clicking inside, or after hovering on those nested dropdowns?

Any help would be greatly appreciated. Thank you very much!


Here is my public share link: https://preview.webflow.com/preview/brightivity?utm_medium=preview_link&utm_source=designer&utm_content=brightivity&preview=166fa4fb180e539ec50f207c87eec8b9&pageId=620534a75d27f2062521e5ab&workflow=preview

I haven’t seen a good implementation of nested dropdowns in Webflow; I don’t think it’s designed to isolate the classes well enough to build a more complex UX.

One approach might be to disable all of the open-on-hover settings, and then roll your own using custom attributes, hover events, and JS that clicks the appropriate elements to hover-open them ( but not blur-close ).

However none of this is very mobile friendly.

A more common design approach is the megamenu, which adapts better responsively.

1 Like

Thank you very much for your detailed response!

I will leave it without animations for the moment. I will propose the megamenu implementation for the future - that actually may apply very well for this client if they continue to grow.

Have a good day!