Hover Issue - Mouseout triggered unexpectedly
I'm having trouble with a hover effect on a menu.
HTML
-
<ul id="MainNav" class="nav" >
<li><h2><a href="#">Item 1</a></h2>
<ul class="subnav">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item <span>2</span></a></li>
<li><a href="#">Sub Item <span>3</span></a></li>
</ul>
</li>
</ul>
JS
-
$('#MainNav li ul.subnav').each(function(){
$(this).hide().parent().wrap("<span class='hoverEffect'></span>");
});
$('#MainNav span.hoverEffect').hoverIntent(function(){
if(!$(this).find("ul.subnav").hasClass("animated")){
$(this).dequeue().stop().find("ul.subnav").fadeIn('slow');
}
},
function(){
$(this).find("ul.subnav").addClass("animated").fadeOut('slow', function(){
$(this).removeClass('animated').dequeue();
});
}
);
The reveled child elements flicker when moving to the ul.subnav and if the mouse stays stationary too long on the ul.subnav, the first mouse move fires the mouseout event.
Below is the CSS fallback just incase thats causing the problem
-
ul.nav,
ul.nav * { margin:0;padding:0;}
ul.nav {
position:relative;
}
ul.nav li {
float:left;
list-style-type:none;
}
ul.nav li ul {
width:100%;
position:absolute;
height:auto;
top:2.1em;
background-position:0 0 !important;
left:-9000px;
display:block;
}
ul.nav span.hoverEffect li ul {left:0; width:100%;}
ul.nav li ul li {
padding:0;
border:none;
width:auto;
max-width:none;
}
ul.nav li a {
display:block;
float:left;
padding:0 1em;
height:2.4em;
line-height:2.5em;
}
ul.nav li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:1em;
height:2em;
background-position:0 50% !important;
padding:.875em .75em .25em .75em;
}
ul.nav li:hover ul {left:0;z-index:10}