Debounce on nav menus

[nathanmerryInvestoo]

Hi

I am creating a simple dropdown with multiple levels which are visible when a user hovers over the parent menu-item (for desktop anyway).

I have managed to get it working except for one part. When you hover off of the sub-menu, there is suppose to be a slight delay as to when the sub-menu goes from active to inactive - this is so that if the user moves off the sub-menu by accident they can move back on it before it disappears.

I understand I can do this by attaching debounce to the event listener, but I only need the delay when the user moves off the nav completely, not just going from nav-item to nav-item.

cryptonblog.themerex.net/ - this is an example of how how it should feel.

If you would like example code in codepen, I can make one if need be.

Does anybody have any advice on how I could go about doing it?

[SimoTod]

can you use the same debounce function (but with timeout=0) on the other listeners you use to show your nav items?
Something like: https://codepen.io/SimoTod/pen/VwvNyvX

[nathanmerryInvestoo]

Works great, thankyou!