下拉菜单消失，仅在IE7问题中回来 [英] Drop-down menu disappears and comes back only in IE7 problem

问题描述

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

当我把鼠标放在li与class子菜单，ul的ID为＃nav2 fadesIn（）;
然而，在二级导航（＃nav2）的两个li之间，我有以下内容：

  ; li>< a href =＃> hover< / a> / 
< ul id =nav2> 
< li>< a href =＃> hover2< / a> /< /锂> 
< li>< a href =＃> hover3< / a>< / li> 
< / ul> 
  

现在，当鼠标移动分隔两个< li>的/菜单fadesOut（）;
但是如果您将鼠标放回hover2 li或hover3 li [菜单完全淡出之前]，菜单（＃nav2）将按照预期的方式淡入淡出

这是我使用的javascript：

  //显示nav2当鼠标悬停.submenu 
 $（'＃nav1 li：eq（1）'）。addClass（'submenu'）; //将类子菜单添加到第二个列表项
 $（'＃nav1 li.submenu'）。hover（function（）{
 // mouse on 
 $（'＃nav2'）。 fadeIn（）; 
}，function（）{
 // mouse off 
 $（'＃nav2'）。fadeOut（）; 
}）; 
  

EDIT1：这是两个导航系统的CSS，＃nav1和＃nav2：

  / * NAV1  - 顶部导航列表左上角* / 
 ul＃nav1 {position：absolute;左：31px;顶部：48像素; } 
 ul＃nav1 li {float：right;显示：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  - 底部导航列表（第二个列表）左上角* / 
 ul＃nav2 {display：none;位置：绝对左：-13px;顶部：22px; height：16px;背景：url（../ images / nav2bg.png）不重复右上角; width：171px; padding-right：20px; line-height：13px;} 
 ul＃nav2 li {float：right;显示：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语句：
 
 $ b 
  ul＃nav1，ul＃nav2，＃footer {zoom：1; } 
 ul＃nav1 {left：-410px; } 
 ul＃nav2 {left：428px; } 
 ul＃nav1 li.submenu {zoom：1;身高：1％; } 
  
我意识到一些特定的IE7 css代码是多余的，但我似乎无法告诉为什么它不起作用？
 
 
 
 EDIT2：我应该提到这在IE8，Firefox，Chrome和Safari中完美无缺。
 
 
 
任何想法为什么这是在IE7发生，如何解决？
 
 
 
非常感谢！
 
 
 
 Amit 
解决方案
顺便问一下，如果有人对我如何解决这个问题好奇，使用jQuery删除5px边距并添加一些。这是我使用的代码：
  $（'＃nav1 ul li：last'）css（{'marginRight' '-5px'}）。prepend（'& nbsp;'）; //阻止IE 7错误
  
祝你好运！ 
 Amit 
 
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
解决方案
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:
$('#nav1 ul li:last').css({ 'marginRight': '-5px' }).prepend('&nbsp;'); // prevents IE 7 bug
Good luck guys!
Amit

                        
这篇关于下拉菜单消失，仅在IE7问题中回来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！