Question

我的下拉菜单中有一个问题。通常他们工作正常，但这次发生的事情如下（这只发生在IE7 ......呃）：

当我将鼠标放在具有类子菜单的li上时，id为＃nav2的ul为fadesIn（）; 但是，在二级导航的两个li之间（＃nav2），我有以下内容：

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

现在，当鼠标移过分隔两个＆lt; li＆gt;的“/”时，菜单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）。避免鼠标“掉落”菜单的一种解决方法是在菜单上设置样式，而在＆lt; A＆gt;之间没有间隙。块，您可以调整以实现这一目标吗？

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

Answer 2

顺便说一下，如果有人对我如何解决这个问题感到好奇，我使用jQuery删除5px边距并添加一些s。这是我使用的代码：

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

祝你们好运！阿米特

下拉菜单消失，仅在IE7问题中返回

2 个答案: