jQuery.hoverIntent flicker in submenu

Question

I'm seeing some strange flickering in a JS submenu implemented using jQuery.hoverIntent on this page here. The flicker only occurs over images that are further down the page, hidden by the appearing menu in Chrome and Firefox and the whole menu actually renders behind those images in IE7. Weirdly, the previous implementation (here) works without the flicker. I'm fairly certain that it's CSS issue, since we are in the middle of a refactoring in which we're trying to consolidate stylesheets and scripts. Any help is greatly appreciated :)

Answer 1

EDIT: Although my initial answer below still works to fix the issue, here is the real cause of the issue and a better fix.

The image further down in the page is in a positioned div (which is position relative). When the menu loads, it sets the z-index last. If you specify the z-index in your stylesheet, the fade will work and it will no longer flicker. This worked for me while inspecting:

ul#topMenuJs li.qnav0>div { 
  z-index:5; 
}

---

OLD ANSWER: You are seeing the flicker because you are fading in the dropdown menu. You can do two things:

1. Get rid of the fade altogether and just do a .show() on the dropdown
2. Give the ul#topMenuJs li.qnav0>div an opacity:1 !important; to override the js

The latter I tested and it works.