下拉菜单消失并仅在IE7中返回问题
我的下拉菜单之一有问题。通常它们工作正常，但这次发生的情况如下（这只发生在 IE7 中……呃）：
当我将鼠标放在带有 class 子菜单的 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>
现在，当鼠标移到分隔两个
这是我正在使用的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：This是两个导航的 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 中会发生这种情况以及如何修复它吗？
多谢！
阿米特
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当鼠标穿过 IE6/7 中的链接边界时，它会触发一个事件，就像鼠标离开并重新进入一样，即使鼠标仍然位于同一父元素（在本例中为 li）上。避免鼠标“穿过”菜单的一种解决方法是将菜单样式设置为 和 之间没有间隙。块，你可以调整以实现这一点吗？
将li的背景颜色设置为红色，a的背景颜色设置为绿色...对于IE6/7的此类操作，任何显示出来的红色都是潜在的鼠标事件危险区域。
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.
顺便说一句，如果有人好奇我是如何解决这个问题的，我使用 jQuery 删除了 5px 边距并添加了一些 。这是我使用的代码：
祝大家好运！
阿米特
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:
Good luck guys!
Amit