Hover Dropdown Menu Error

Design help Animations & Interactions
1

Hey guys,

I am trying to finalize my website and I am having some issues getting my dropdown menu to work.

I have looked through the forums and the various Webflow tutorials, which are all useful, BUT none of them seems to deal with horizontal dropdown menus.

– I have tried using both a simple hover interaction that will open another Div, but the issue is that will only disappear when you Hover out of the DROPDOWN menu. I obviously want it to disappear when you hover off of BOTH the dropdown menu AND the actual menu button.

– I have also tried using Webflow’s built in dropdown feature, and it has some similar issues.

Any help is greatly appreciated.

Thank you!

Here is my public share link: LINK

2

Hi @carlsson,
You can add one more hover trigger inside the interaction, which you use for hover animation for every “dropdown”.

For example, in the Work dropdown interaction add one more Hover trigger, but affect “Creatives” menu, and use only step “Hover over” for hide it.

Hope I was clear enough.

Regards,
Anna

1 Like
4

Hi @sabanna - and thank you for helping me once agian :slightly_smiling:

I am not 100% sure if I’m understanding you correct.

Here’s my current situation:

Navbar

  • Work-button (has “Work Dropdown” interaction that will display “Work Dropdown” section when you hover it)

Work Dropdown
Displays the dropdown menu. Will disappear when you hover off of it, the dropdown menu.

So, my issue is that if you’re cursor is on the menu, NOT on the dropdown, the dropdown menu will stay there, and not disappear once you hover off of the “Work”-button.

Thank you again, I really appreciate your help.

5

Ok, here is video of what I mean

1 Like
6

@sabanna – this makes a lot more sense! Thank you so much!

You think it would work to also add another trigger on the Creatives interaction so when you move cursor to the right, over the logo, the creatives dropdown would disappear?

Also, what would be the solution for this to the left of the Work button? Can I put an empty div there, so when you hover over it, the bar goes away? Or is there a simpler solution?

7

I would create interaction with hover trigger for Nanvbar, which closes all dropdowns.

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.