Hi there,
I’m trying a menu on hover interaction that opens a second menu tier. Only issue is the second tier doesn’t stay open when I hover off the first menu link. I’d like a hover over a click if possible.
Here is the share link:
https://preview.webflow.com/preview/typespace-692e4e?utm_source=typespace-692e4e&preview=bffa298fb78f5b499e4c624fa4d6e694
Live preview:
https://typespace-692e4e.webflow.io/
Can anyone help?
DB
You would be better off restructuring your content in such a way that both main menu items and their corresponding secondary menu elements are inside of the same div. Then you will put two interactions - one for the main menu item which will open secondary nav, second - on the wrapper containing both main nav and it’s children menu items - you will put hover out interaction that will close the secondary menu.
Thanks @dram for the reply.
Currently I have the menus set up as rows, rather than columns. I’m not sure how to configure the secondary menu to be in the same div as the primary menu without them all overlapping and having to mess wth z-index layers.
I tried to implement this using Dropdown component and got it to work, however the area of hovering was fiddly and not straightforward for the user.
At the moment I’ve changed the menu to be on click instead of hover, but it’s not as nice on desktop. I’d be open to a coded approach if not too complex 
I still think you should rebuild this for semantic structure. You don’t want your menu structured like that.
Here, I created an example of structure and interactions for you. Try replicating it, tweaking as necessary.
Thanks a bunch @dram!
This is mighty handy, and I’ll rebuild my menu around your example, which is structured way better than my original attempt. Hopefully others wanting to build a side-by-side menu will find this helpful.
Appreciate your help.
You are welcome!
ps: I love the font on this page, such a tasteful choice! And despite almost nothing is on the page yet, I already like your (?) portfolio 
Cheers Alex, this site will be for a studio I work with.
I’m going for a minimal typographic aesthetic so the font has to have a bit of character. It’s BW Gradual if you want to bookmark that one for later 
ps: your own site is a feat of engineering. I’m digging the style and choices going on there!
Sorry to bother you again.
I’ve had a go at building your example div-for-div and I’ve almost got it working, except something is making all the second menu items appear when I hover over the first menu items, and they also don’t disappear on hover out. I’ve looked at the interactions a bunch of times but can’t see where I’m going wrong.
Care to take another look?
The ix on the parent div (div 26) containing both primary and secondary nav should target children, not siblings.
Oh and you should not use the same class for the secondary nav as your main nav! I know I derped myself in this regard yesterday so it’s not your fault Just duplicate the text class on secondary nav to keep the style but remove the interaction from them.