我的下拉菜单中有一个问题。通常他们工作正常,但这次发生的事情如下(这只发生在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中发生这种情况以及如何解决它?
非常感谢!
阿米特
答案 0 :(得分:2)
当鼠标穿过IE6 / 7中的链接边界时,它会触发一个事件,就像鼠标离开并重新进入一样,即使鼠标仍在同一个父元素上(在本例中为li)。避免鼠标“掉落”菜单的一种解决方法是在菜单上设置样式,而在&lt; A&gt;之间没有间隙。块,您可以调整以实现这一目标吗?
在li上将背景颜色设置为红色,在a上设置为绿色...任何显示的红色都是IE6 / 7的潜在鼠标事件危险区域。
答案 1 :(得分:0)
顺便说一下,如果有人对我如何解决这个问题感到好奇,我使用jQuery删除5px边距并添加一些s。这是我使用的代码:
$('#nav1 ul li:last').css({ 'marginRight': '-5px' }).prepend(' '); // prevents IE 7 bug
祝你们好运!
阿米特