On the megamenu for business space on the attached website, you have to move the cursor vertically down to keep the menu open. You can’t for example hover over business space and go down diagonally left or right to warehouse space or office space as this causes the mega menu to close as it hovers over the other menu items as you do it.
I’d like to create a delay on the hover of other menu items when the mega menu is open so that we can go diagonally.
I don’t see it as a major issue personally as it’s self explanatory to me but sites like https://www.johnlewis.com/ seem to have the idea working perfectly so if there’s a relatively straight forward solution it’d be great.
I’m aware the GP menu is solely CSS and this would require JS as far as any solution I’m aware of would be.
What John Lewis have done, aside of probably using a little JS for hover actions, is kept the height of the menu items to a minimum and introduced some empty space between menu items. This means diagonal movement doesn’t cross over another a menu item.
In the case of your menu the items are really tightly packed and even if we could add some JS to introduce delay i can see this creating a separate UI issues.
Just by reducing the menu item height to 60px and adding back in the 20px separating space ( id Developer tools ) resolves the problem – just leaves the issue of how to fit in that many menu items. Maybe a secondary nav for less ‘important’ items ?