jquery - 下拉菜单消失和回来只在IE7问题

Question

我的其中一个下拉菜单有问题。通常它们工作正常，但这次会发生以下情况(这只发生在 IE7 中......呃):

当我将鼠标放在带有类子菜单的 li 上时，id 为 #nav2 的 ul 淡入()；但是，在辅助导航 (#nav2) 的两个 li 之间，我有以下内容:

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

现在，当鼠标移动到分隔两个

的“/”上时，菜单 fadesOut();但是，如果您将鼠标放回 hover2 li 或 hover3 li [在菜单完全淡出之前]，菜单 (#nav2) 会淡入 [如预期..]

这是我正在使用的 javascript:

//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:这是两个导航的 CSS，#nav1 和 #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; }

我也有一些关于它的条件 IE7 语句:

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

我意识到一些特定的 IE7 css 代码是多余的，但我似乎无法说出为什么它不起作用...

EDIT2:我应该提到这在 IE8、Firefox、Chrome 和 Safari 中完美运行。

知道为什么在 IE7 中会发生这种情况以及如何修复它吗？

非常感谢!

阿米特

Answer 1

在 IE6/7 中，当鼠标穿过链接边界时，它会触发一个事件，就好像您的鼠标离开并重新进入一样，即使鼠标仍在同一父元素(在本例中为 li)上方。避免鼠标“穿过”菜单的一种解决方法是设置菜单样式，使 block 之间没有间隙，您是否可以进行调整以实现这种情况？

在 li 上将背景颜色设置为红色，在 a 上设置为绿色......任何显示出来的红色对于 IE6/7 的此类操作来说都是潜在的鼠标事件危险区域。