带有动画子导航的 jQuery 下拉菜单在 IE 中不起作用

Question

我有一个带有动画子导航的动画下拉菜单，可以在 FF、Chrome、Safari 中完美运行...但是，当然，IE 会很困难。此时，我只构建了产品菜单。

我使用 .hover 和 .animate 来扩展包含子菜单项的 div 的宽度。

当您将鼠标悬停在“产品”下的某个子菜单项上时，右侧会弹出另一个子菜单，其中包含更多项目。

在 IE 中，如果我很快将鼠标悬停在第一个子菜单上，我就可以弹出它。即便如此，它似乎只想部分动画。此外，我的子菜单项似乎都不接受它们的 a:hover 样式。

有什么想法吗？

这是一个链接：http://www.saundersintegrated.com/us_armor/new_site/home_1_6_test。 html

CSS:

/* PRODUCTS */
#menuProducts{
 position:absolute;
 display:block;
 top:129px;
 right:315px;
 padding-top:7px;
 padding-bottom:7px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:#999;
 cursor:pointer;
 z-index:50;

}

#menuProducts a{
 color:#999;
}

#menuProducts a:hover{
 color:#FFF;
}

#drawerProducts{
 position:absolute;
 display:block;
 top:159px;
 right:45px;
 width:705px;
 background-color:#000;
 overflow:hidden;
 /* for IE */
   filter:alpha(opacity=85);
  /* CSS3 standard */
  opacity:0.85;
 z-index:50;
}

#insideDrawerProducts1{
 position:absolute;
 display:block;
 top:5px;
 left:10px;
 height:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 float:left;
 padding-right:10px;
 border-right: thin #333 solid;
 z-index:5;
}

#insideDrawerProducts1 a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
}

#insideDrawerProducts1 a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFF;
}

#insideDrawerProducts2{
 position:relative;
 display:block;
 top:5px;
 left:10px;
 height:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 float:left;
 padding-left:10px;
 z-index:5;

}

#insideDrawerProducts2 a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
}

#insideDrawerProducts2 a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFF;
}

#featuredProjectImage{
 position:absolute;
 display:block;
 top:0px;
 left:20px;
 z-index:5;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#999;

}

#featuredProjectImage a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;

}

#featuredProjectImage a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#fff;

}


#featuredProjectText{
 position:absolute;
 display:block;
 top:45px;
 left:170px;
 width:150px;
 z-index:5;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#ccc;

}

#productsMenuMain{
 position:absolute;
 display:block;
 top:0px;
 left:340px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 border-right:thin solid #000;
 border-left:thin solid #000;
 overflow:hidden;
 z-index:5;

}

#productsMenuSubmenu{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:3px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;
}

#productsMenuSubmenu a{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ccc;
}

#productsMenuSubmenu a:hover{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#000;
 background-color:#F60;
}


#productsMenuConcealable{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuTacticalVests{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}


#productsMenuTacticalAccessories{
 position:absolute;
 display:block;
 top:0px;
 left:583px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuCorrectional{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuInternational{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuEOD{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuSubmenu2{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:3px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;
}

#productsMenuSubmenu2 a{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ccc;
}

#productsMenuSubmenu2 a:hover{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#000;
 background-color:#F60;
}

HTML:

<!--PRODUCTS MENU-->
<div id="menuProducts"><a href="#"><span>PRODUCTS</span></a></div>

<div id="drawerProducts">

<div id="insideDrawerBorder">

<div id="featuredProjectImage">
<h1>Featured Product</h1>
<img src="images/featured_product_1.png" />
<br /><br />
<a href="#"><span>>&nbsp;learn more</span></a>
</div>

<div id="featuredProjectText">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
</div>

<div id="productsMenuMain">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Concealable"><span>Concealable</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Tactical"><span>Tactical</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Correctional"><span>Correctional</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="International"><span>International</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="EOD"><span>EOD/Specialty</span></a></div>
</div>

<div id="productsMenuConcealable">
<br />
<div id="productsMenuSubmenu"><a href="#" name="USA_Classic"><span>USA Classic</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Terminal_Velocity"><span>Terminal Velocity</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="XLT"><span>XLT</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="XP"><span>XP</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="New_Model"><span>New Model</span></a></div>
</div>

<div id="productsMenuTacticalVests">
<br />
<div id="productsMenuSubmenu">VESTS</div>
<div id="productsMenuSubmenu"><a href="#" name="TAV"><span>TAV</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Cover_Plus"><span>Cover Plus</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="MSTV"><span>MSTV</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="GET"><span>GET</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Narco"><span>Narco</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="New_Tactical"><span>New Tactical</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Flotation_Tactical"><span>Flotation Tactical</span></a></div>
</div>

<div id="productsMenuTacticalAccessories">
<br />
<div id="productsMenuSubmenu2">ACCESSORIES</div>
<div id="productsMenuSubmenu2"><a href="#" name="Helmets"><span>Helmets</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Plates"><span>Plates</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Shields"><span>Shields</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="GET"><span>GET</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Pockets_and_Pouches"><span>Pockets and Pouches</span></a></div>
</div>

<div id="productsMenuCorrectional">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Concealable_Correctional"><span>Concealable Correctional</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Tactical_Correctional"><span>Tactical Correctional</span></a></div>
</div>

<div id="productsMenuInternational">
<br />
<div id="productsMenuSubmenu"><a href="#" name="PFA"><span>PFA</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="PASGT"><span>PASGT</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Peace_Keeper"><span>Peace Keeper</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Rapid_Response"><span>Rapid Response</span></a></div>
</div>

<div id="productsMenuEOD">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Breacher_Blanket"><span>Breacher Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Bomb_Blanket"><span>Bomb Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Ballistic_Blanket"><span>Ballistic Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Custom_Panels"><span>Custom Panels</span></a></div>
</div>

<!--END insideDrawerBorder-->
</div>

<!--END PRODUCTS MENU-->
</div>

JQUERY:

$(document).ready(function() {

var minDrawerHeight = 0;
var maxDrawerHeight = 250;

$('#drawerProducts').css('height',minDrawerHeight);



<!--------------------------- MENU --------------------------->


<!--- MENU DROPDOWN --->


$('#menuProducts, #drawerProducts').hover(function(){
  $('#drawerProducts').stop().animate({'height': maxDrawerHeight}, 400, 'swing');
   },
   function(){

$('#drawerProducts').stop().animate({'height': minDrawerHeight}, 400, 'swing')

});





<!--- PRODUCTS SUBMENUS --->

var minMenuWidth = 0;
var maxMenuWidth = 120;

$('#productsMenuConcealable').css('width',minMenuWidth).hide();
$('#productsMenuTacticalVests').css('width',minMenuWidth).hide();
$('#productsMenuTacticalAccessories').css('width',minMenuWidth).hide();
$('#productsMenuCorrectional').css('width',minMenuWidth).hide();
$('#productsMenuInternational').css('width',minMenuWidth).hide();
$('#productsMenuEOD').css('width',minMenuWidth).hide();


$("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable'], #productsMenuConcealable").hover(function(){
 $('#productsMenuConcealable').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuConcealable').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical'], #productsMenuTacticalVests, #productsMenuTacticalAccessories").hover(function(){
 $('#productsMenuTacticalVests, #productsMenuTacticalAccessories').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuTacticalVests, #productsMenuTacticalAccessories').stop().animate({'width': minMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional'], #productsMenuCorrectional").hover(function(){
 $('#productsMenuCorrectional').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuCorrectional').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='International'], #productsMenuInternational").hover(function(){
 $('#productsMenuInternational').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='International']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuInternational').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='International']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='EOD'], #productsMenuEOD").hover(function(){
 $('#productsMenuEOD').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='EOD']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuEOD').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='EOD']").css({'background': 'none', 'color':'#ccc'});
});



<!--END DOC READY-->
});

Answer 1

看看这个

http://www.xs4all.nl/~peterned/csshover.html< /a>

Answer 2

更新：事实证明，罪魁祸首是有一个带有不透明度过滤器的 div 嵌套在另一个也具有不透明度过滤器的 div 中。