下拉菜单消失并仅在 IE7 问题中返回答案

【问题标题】：Drop-down menu disappears and comes back only in IE7 problem下拉菜单消失并仅在 IE7 问题中返回
【发布时间】：2010-07-29 21:31:16
【问题描述】：

我的一个下拉菜单有问题。通常它们工作正常，但这次会发生以下情况（这仅在 IE7 中发生......呃）：

当我将鼠标放在带有类子菜单的 li 上时，id 为 #nav2 fadesIn(); 的 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 中发生这种情况以及如何解决吗？

非常感谢！

阿米特

【问题讨论】：

标签： jquery html css navigation drop-down-menu

【解决方案1】：

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

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

【讨论】：

我明白了。唔。每个链接后面都有一个 /（翻译为“/”）。如果不将“/”作为链接的一部分，是否可以完成您建议的任务？

【解决方案2】：

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

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

祝大家好运！阿米特

【讨论】：