Drop-down menu disappears and comes back only in IE7 problem

Question

Hi all,

I have a problem with one of my drop-down menu. Usually they work fine, but this time what happens is the following (and this is only taking place in IE7...ugh):

When I put the mouse over the li with class submenu, the ul with id of #nav2 fadesIn(); However, in between the two li's of the secondary nav (#nav2), I have the following:

<li><a href="#">hover</a> /
  <ul id="nav2">
    <li><a href="#">hover2</a> /</li>
    <li><a href="#">hover3</a></li>
</ul>

Now, when the mouse moves over the " / " that separates the two <li>s, the menu fadesOut(); But if you put the mouse back on either hover2 li or hover3 li [before the menu completely fades out], the menu (#nav2) fades in [as expected..]

This is the javascript that I'm using:

//show nav2 when mouse-over .submenu
$('#nav1 li:eq(1)').addClass('submenu'); //adds class submenu to second list item
$('#nav1 li.submenu').hover(function() {
 //mouse on
 $('#nav2').fadeIn();
}, function() {
 //mouse off
 $('#nav2').fadeOut();
});

EDIT1: This is the CSS of the two navs, #nav1 and #nav2:

/* NAV1 - top nav list top left corner */
ul#nav1 { position: absolute; left: 31px; top:48px; }
ul#nav1 li { float: right; display: inline; margin-left: 5px;}
ul#nav1 li a { color: black; font-size: 12px; font-weight: bold; }
ul#nav1 li a:hover { color: #7090a7; }
ul#nav1 li a.navActive { color: #7090a7; }

/* NAV2 - bottom nav list (second list) top left corner */
ul#nav2 { display: none; position: absolute; left: -13px; top: 22px; height: 16px; background: url(../images/nav2bg.png) no-repeat top right; width: 171px; padding-right: 20px; line-height: 13px;}
ul#nav2 li { float: right; display: inline; margin-left: 5px; }
ul#nav2 li a { color: black; font-size: 12px; font-weight: bold; }
ul#nav2 li a:hover { color: #f4f4f4; }
.active { color: gray; }

I also have some conditional IE7 statements regarding it:

ul#nav1,ul#nav2,#footer { zoom: 1; }
ul#nav1 { left: -410px; }
ul#nav2 { left: 428px; }
ul#nav1 li.submenu { zoom: 1; height: 1%; }

I realize some of the specific IE7 css code is redundant, but I can't seem to tell why it doesn't work...

EDIT2: I should mention that this works flawlessly in IE8, Firefox, Chrome, and Safari.

Any idea why this is taking place in IE7 and how to fix it?

Thanks a lot!

Amit

Answer 1

When the mouse crosses a link boundary in IE6/7, it will fire an event as if your mouse left and re-entered, even if mouse is still over the same parent element (in this case the li). One workaround to avoid having the mouse "fall through" the menu is to style the menu with no gaps between <A> blocks, can you potentially adjust to make this happen?

Set background color to red on the li, and green on the a ... any red that shows through is a potential mouse event danger area for IE6/7 with this type of operation.

Answer 2

By the way, if anyone is curious as to how I solved this problem, I used jQuery to remove the 5px margin and add some  s. This is the code I used:

$('#nav1 ul li:last').css({ 'marginRight': '-5px' }).prepend(' '); // prevents IE 7 bug

Good luck guys! Amit