Ok, I don’t know how to begin with. But I had to find again what I did to make it work the first time, I remember now… I just had forgotten about two little details. I’m going to document it better.
Ok to begin with how does Webflow DropDown menu works? It’s a Dropdown element, containing a DropDown Toggle (the menu item) and a DropDown list (the menu itself). By default, the menu is display:none. In the editor, you can make it appear by selecting the menu item and clicking on Open Menu in the Settings tab. The menu appears and it has an extra class: Open.
Now how this HOVER DropDown menu works? There is a hover interaction on the DropDown Toggle, set on HOVER IN to affect the DropDown List and to set it from display:none to display:box. The there is an interaction on the DropDown List set on HOVER OUT, that sets the List to display:none again.
For this to work, the list must catch the HOVER event as soon as it’s visible, for that there are conditions:
the List has to be artificially extended all the way up to the top of the menu bar (pass the bg color of the list to transparent, and the bg color of the links inside the list to something you want.)
the list has to be ON TOP OF the DropDown Toggle. So set the List z-index to 2 and the DropDown Toggle z-index to 1.
The last trick to make it work: When you’re going to alter the List to go all the way up the navbar, by increasing its upper padding and decreasing the upper margin, don’t do it by making the menu show up with the button in the Settings panel, because it will add a “Open” class state. Instead, select the List in the navigator panel, set it to visible (box) in the first panel, and modify it from there. Set it to display:none again once edited.
And I may take your word on that some day (: i’ve never been to Turkey yet but always wanted to. Istambul would be a must. And I’m in France so it’s really not that far.
Huge help @vincent! I greatly appreciate you detailing this out. I went about it a slightly different way with interactions, but this post really helped me to understand the menu and how to handle the hover and multiple instances. Thanks!
Just want to add to this. I think the biggest issue you’re facing is that you’re trying to use the existing dropdown menu and change its trigger. This is tricky because you’re overloading the hover event with different directives and it makes it “confusing” for the program to decide what to trigger. And probably also the built-in events will take precedence over interactions.
I got around this by just doing away with the dropdown widget and creating one myself. Here’s how.
Create a div called ‘dropdown wrapper’
Create a menu item for the top level ‘parent-link’
Don’t create a secondary nav! It causes double mobile menus. Instead, just create a div wrapperfor the dropdown ‘dropdown-list’, add links manually, style as you want.
Make your nav menu ‘dropdown-list’ display: none and opacity: 0
Place the ‘parent-link’ and the ‘dropdown-list’ in the dropdown wrapper, as siblings
Add an interaction on hover for the dropdown wrapper (we do this on the wrapper instead of the menu item so you can continue to hover over the child dropdown menu without the hover cancelling) that shows the nested ‘dropdown-list’ (affect other element)
Make the animation for this display: block without a 100ms timeout, then opacity: 100%;
Make sure this interaction includes an inverse hover-off effect eg. opacity: 0; with 100ms timeout then display:block
That should do it, and you just have to be careful with your mobile menu if you have one! The bonus of this is that you can click the top menu item as well as its children, yay!
