I’m trying to create one of those large mouseover navigation menus that you often see (here’s an example on http://www.vodafone.co.uk/)
I can mouse over an item in the navigation and then move the mouse down into the opened nav to select an item. If I mouse off the opened navigation I return to the default closed state and the rollover state of the nav button returns to normal
I can’t seem to maintain the hover state of the navigation item AND enable the user to cursor down over the opened menu. It’s like it’s one or the other.
I did make a breakthrough shortly before your reply. It turned out I needed to essentially rebuild the nav bar without using the standard Webflow component.
It’s very hacky though because in order to make sure that the rollover states appear as I need them to I’m having to put lots of interactions in there. For example on the DIV that houses the EU VAT link, I have to have an interaction that hides the black services navigation DIV, as well as the little black triangle that points upwards. If you look through the interactions in my read only site you’ll see that.
If you know of any way to do this in a more conventional way, I’m all ears. The frustrating thing is that I’m going to have to build the mobile nav from scratch too, which is a shame since the standard component does it so well.
But in a few words, you need to enlarge the drop-down menu so it underlays the menu item, and then add a top padding of the same value. That way, the menu can stay open and you can preperly register the hover-out when passing on another item.
Now that can be a problem with mega menu, but there must be a way…
Be aware that when using the Nav component of Webflow, it comes with a proper Nav HTML5 tag. If you’re redoing your nav entirely, you should carrefuly add the Nav HTML5 tag manually. It’s important for SEO but it’s also important if the menu is fixed and you’re linking to #sections within the page.
So here I show you how my custom upper div is actually a navigation bar and how I manually said that to HTML. In the code, you see that the element itself is now names <nav> instead of <div>
Tags are HTML5 basis. Instead of everything being a div, you can specify what is a nav, a section, a header, the footer, the sidebar etc. It makes the code “semantic”, have a more natural reading. It’s good for SEO, accessibility (and OCD tendencies )
I let you do you own research because with HTML5 tags it’s difficult to find strict ules, there room for interpretation. Just remember one important thing: any sub content that can be listed in a list, like anything you’d see listed in a RSS feed, must be an <article>. By respecting this rule you’ll increase the SEO of your content and drastically help people who rely on accessible devices to read content.
PS: Webflow doesn’t propose all the tags so you can start to familiarize with those. I wrote an extensive post once, about Webflows’ tags but… can’t find it, stupidly
)