Dropdown on hover doesn´t work


i tried to build an on hover dropdown menu and followed exactly this instructions on this topic:

But it doesn´t work properly. It actually might work after clicking one time on the navbar link. It´s really curious because it work if i build this in a completely new project.

Any ideas/suggestions?

The mentioned Navbar is on the Homepage. Here is the public link:

Dropdown on Hover is tricky anyway. See here how I do http://sab.webflow.com/

(green public link in the sidebar)

The “secret” is that you have to catch the hover also on the submenu, to be able to catch the hover-out and close it. To do so, you need the menu to go under the bar and add a padding so it goes all the way under.

1 Like

Hi Vincent,

it´s really curious. I do it like you said but it won´t work properly. It seems like that there´re two Droplists. After clicking one time on the hover it works. But to click is of course not the intention. And i changed the BG colour of the dropdownlist in to a red with a bit opacity to see what´s wrong. And there are two different dropdown lists.

This is the Public link, if wou want to take a closer look:

Thanks anyway for your help !

as far as I see it works on your site. you just have to add a hoverout that close the menu on the menu item itself (on top of having one, like you did, on the dropdown menu)

I could go crazy. There should be a bug with the dropdown element by itself. I rebuilt it exactly like in your example but either i missed something or there is just a bug in the element.

However, huge thanks for your effort to help me!


Make a screencast to show me what bugs, because I couldn’t see it.

Hi Vincent,

here is a small screencast to show what´s the problem is. I guess it will be obvious. You can see that the “Hover & Hide” just work if i move the cursor out of the Dropdownlist below the Navbar.


can you put the public link back ?


Here it is:

1 Like

I have deconstructed yours and mine and I don’t see why it does not work… will look at it again later.

It´s curious. Isn´t it?

Ok. Thanks in advance.

I’m mad about this thing (: There must be a difference between your implementation and mine. Could you, for a start, create a blank page, and copy only your navbar in it? And test from there. At least we’ll be sure nothing interact with it.

Done but unfortunately without success. I even created a new project before and build this navbar from scratch to be sure that no other script affect the dropdown. Again no success.

Can you put the navbar back on a page please ?

of course. i put it back

1 Like

Hahahahahaha !

1 Like


as i see the first two work well and the last one won´t. Right? And i presume they´ve all the same interactions and properties or could you find any difference Vincent?

I accidently delete my previous reply. Sorry.

This is totally insane. As i see they work well. Right? Did you find the mistake?

@aykut I come back to explain, i’m just narrowing everything down to be sure it’s rock solid and that I understand what I’ve done (: