Streaming live at 10am (PST)

Dropdown on hover doesn´t work


#1

Hi,

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:
https://webflow.com/design/vieclambank?preview=2e94d1947137a64d8ecf8f4af8ca2d8f


#2

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

(green public link in the sidebar)


#3

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.


#4

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:
https://webflow.com/design/vieclambank?preview=800b1ed4b102f002c073c6ffe846d290

Thanks anyway for your help !


#5

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)


#6

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!

wink


#7

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


#8

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.

http://www.screencast.com/t/Yyw8ihW3


#9

can you put the public link back ?


#10

Sure

Here it is:
https://webflow.com/design/vieclambank?preview=db0f78e66c347c64b83176d7925edb73


#11

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


#12

It´s curious. Isn´t it?

Ok. Thanks in advance.


#13

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.


#14

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.


#15

Can you put the navbar back on a page please ?


#16

of course. i put it back

.......................................


#17

Hahahahahaha !


#18

HAHAHA

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?


#19

I accidently delete my previous reply. Sorry.

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


#20

@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 (: