Remove delay of Superfish dropdown menu onmouseover, while keeping the Hoverintent delay onmouseout Remove delay of Superfish dropdown menu onmouseover, while keeping the Hoverintent delay onmouseout wordpress wordpress

Remove delay of Superfish dropdown menu onmouseover, while keeping the Hoverintent delay onmouseout


It seems like you might be including the HoverIntent plugin. One of Superfish's options is "disableHI". If you set that to "true" then Superfish will not use HoverIntent to delay the mouseenter event. Or you could just not include the HoverIntent plugin if you do not plan on using it elsewhere on the site. Hope this helps.

$('ul#menu-airco-mb-navigatiestructuur').superfish({    delay: 600,    autoArrows: false,    speed: 'fast',    disableHI: true});

I have created two test cases. The first one is a simplified version of your page using your CSS and the second is exactly the same except I removed all your CSS and only included the basic superfish.css found on the Superfish website. I also altered the menu class from 'menu' to 'sf-menu' just so the superfish.css works.

Notice that the version with my CSS works like you want it to, whereas the the one with your CSS has the bug you describe. I guess there is a CSS issue that you could sort out by comparing mine to yours and altering yours to match it closer. One difference I see is that I set the sub menu ULs to a fixed em width and their child LIs to 100%, whereas you do not. This isn't the culprit, but shows that you may benefit from aligning your CSS more closely with the tried and tested way of doing Superfish menus. Hope this helps.


What you're seeing on mouseover isn't any delay but the actual animation running.

I suppose you could remove animation.

If you only animate the height you get immediate visual response as opposed to opacity which takes a second to appear.

Functionality wise that may be but you want, don't know about visually.

        $('ul#menu-airco-mb-navigatiestructuur').superfish({            delay       : 0,            animation   : { height:'show' },            speed       : 'fast'        });