HoverIntent & SuperFish Flicker

Question

I've got a weird issue on this site http://bit.ly/MJ8KT6 which utilises the HoverIntent & the Superfish menu solution. I'm running a 0.2s delay on the main sub menu at the top of the website to help prevent users mousing off the sub-menu. This works perfectly but what I'm finding is that on a users first visit to the website it can cause the menu to flash on for that 0.2s delay.

Also clicking any of the main four menu options can also invoke the same flicker/flash. Subsequent clicks do not cause the problem and the only way I can replicate the issue in my browser is to delete the cache to then re-visit the website like a first time visitor.

Really not sure whether it's a CSS, Javascript issue or some other conflict. The website can be located here http://bit.ly/MJ8KT6

Any ideas or feedback greatly appreciated. ;)

Answer 1

It looks like you're hiding the sub-menu using Javascript - the flash is being caused by the sub-menu loading before the Javascript runs to hide it.

To fix this, hide the sub-menu in the CSS so that it won't display until the Javascript has loaded:

.sub-menu {
    display: none;
}

This will prevent it being shown when the page loads, but shouldn't affect it's function (since that's controlled elsewhere).