Dropdown mega menu hover issues

Design help General
1

Hi Guys,

I’m in the process of building a drop down mega menu for my site with link blocks in the nav bar that have hover interaction that shows and un-shows a div block (the mega menu). I want to make it so that when I hover over the link and the menu pops up I can move my mouse down to the menu without it disappearing. At the moment when my mouse leaves the hover trigger (link block) the menu disappears as per the hover out interaction. Any ideas on how to keep the menu there if the mouse is on it?

Cheers,

Mitch,

Here’s my project
http://karate-life.webflow.io/

Read only link
https://preview.webflow.com/preview/karate-life?preview=e19932f4943e7e32006a4dc7f18e18b9

2

A quick fix would be to increase the .nav-link padding-bottom from 7px to 9px. There is a small gap where the link breaks. Apart from that you have the classic mega menu problems of “hoverintent”. Read about it here

You can also delay the hover-out-animation for a few ms.