Jquery Mouse Over effect.. going "out" before it should

Question

So I created a simple menu for a small project I have. When people mouse in and out of the menu on IE6 or IE7 the menu will drop down.. but it will go back up if you move the mouse slowly downwards.

Does anyone know how to prevent this behaviour.. it seems like it thinks its mousing out.. even though it hasnt yet..

the url: http://vasoshield.xcsit.com/index.html

the html structure:

<div id="mainNav">
<ul>
 <li class="requestInfoLink">
  <a href="#">Request Info</a>
  <ul>
   <li><a href="ordering.html">Ordering</a></li>
   <li class="last"><a href="contact-us.html">Contact Us</a></li>
  </ul>
 </li> 
 <li class="newsLink">
  <a href="#">News</a>
  <ul>
   <li class="last"><a href="press-releases.html">Press Release</a></li>
  </ul>
 </li>
 <li class="productLink">
  <a href="#">Product</a>
  <ul>
   <li><a href="overview.html">Overview</a></li>
   <li class="last"><a href="uses.html">Uses</a></li>
  </ul>
 </li>
</ul>

jquery

$(document).ready(function() {
$('#mainNav ul li').hover(  
 function() {
  $(this).find('ul').slideDown(100);
 },
 function () {
  $(this).find('ul').slideUp(50);
 }
);

});

the css:

    #mainNav { padding-top: 175px;  }
#mainNav ul { border-bottom: 4px solid #369790; width: 765px; height: 33px;}
#mainNav li a { text-align: center; display: block; height: 24px; font-size: 12px; text-transform: uppercase; padding-top: 9px; line-height: 25px; text-decoration: none; color: black; font-weight: bold;}
#mainNav ul li a:hover { font-weight: bold; }
#mainNav li {  position: relative; float: right; margin-left: 15px; }

#mainNav ul ul { position: absolute; display: none; border: none; width: auto; height: auto; top: 33px; z-index: 999; border-top: 4px solid #369790;}
#mainNav ul ul li a { background: none; height: auto; padding: 0; margin: 0; line-height: 33px; color: #a0a0a0; }
#mainNav ul ul li a:hover { background-color: #939598; color: #616264; }
#mainNav li li { float: none; height: auto; margin: 0; background-color: #c9cacc; border-bottom: 2px solid #dcddde;}

#mainNav li.productLink a { width: 151px; background: url(../images/long_nav2.gif) no-repeat;}
#mainNav li.newsLink a { width: 90px; background: url(../images/short_nav2.gif) no-repeat; }
#mainNav li.requestInfoLink a { width: 151px; background: url(../images/long_nav2.gif) no-repeat; }
#mainNav li.productLink ul { width: 152px; }
#mainNav li.newsLink ul { width: 90px;  }
#mainNav li.requestInfoLink ul { width: 151px;  }
#mainNav li.newsLink ul li a { line-height: 1.6em; height: 40px; padding-top: 5px; }
#mainNav li.productLink li a { background: none;}
#mainNav li.newsLink li a { background: none;}
#mainNav li.requestInfoLink li a { background: none;}

Answer 1

Try mouseenter and mouseleave instead of hover. Mouse enter and leave also cover child elements. See the example here.

You could also move the menus up 1 or 2 pixels. I only checked quickly, but in IE7 and 6 it looks like there is an extra pixel between the two elements (a and UL) that causes un-hover to fire.

Answer 2

Have you tried using mouseenter and mouseleave?

$(document).ready(function() {
  $('#mainNav ul li').mouseenter(function() {
    $(this).find('ul').slideDown(100);
    }).mouseleave(function () {
      $(this).find('ul').slideUp(50);
    });
);

Answer 3

speculating here. IE treats border,padding and margin as gaps. your ul > li has border-bottom:2px; that means u have a gap betweent ur li's. when u enter the gap, it fires mouseout event. trying remove the borders to see if it works.

Answer 4

Note that the $('#mainNav ul li') expression matches inner li elements. Try using $('#mainNav > ul > li') for the main expression.

Also, you can simulate the border in li elements by changing the background colors and padding to:

#mainNav ul ul li a { background-color: #c9cacc; height: auto; padding: 0; margin: 0; line-height: 33px; color: #a0a0a0; }
#mainNav li li { float: none; height: auto; margin: 0; background-color: #dcddde; padding-bottom: 2px; }

This should solve your problems in IE.