I recently developed a straightforward menu for a small project I'm working on. However, I noticed that in IE6 or IE7, the menu drops down when you mouse over it but goes back up when the mouse is moved downwards slowly.
Has anyone encountered this issue before and found a solution to prevent this behavior? It seems like the browser thinks the mouse has left the menu even though it hasn't yet.
You can view the menu at the following URL:
Here is 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>
Javascript
$(document).ready(function() {
$('#mainNav ul li').hover(
function() {
$(this).find('ul').slideDown(100);
},
function () {
$(this).find('ul').slideUp(50);
}
);
});
And here is the CSS code:
#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;}