带有动画子导航的jQuery下拉列表在IE中不工作

我有一个动画下拉菜单，带有动画子视频，在FF、Chrome、Safari中都能很好地工作……但是，当然，IE很难实现。此时，我只构建了产品菜单

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

当您将鼠标移到“产品”下的一个子菜单项上时，另一个子菜单会向右弹出更多项

在IE中，如果我真的很快地在上面滑动鼠标，我可以得到第一个子菜单。即使如此，它似乎只想部分地设置动画。此外，我的所有子菜单项似乎都不接受其a:悬停样式

有什么想法吗

以下是一个链接：

CSS:

HTML:

特色产品



这是一位杰出的领袖，他是一位伟大的领袖。
在最低限度的利益下，我们必须履行自己的职责。






背心


配件

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-->
});

$（文档）.ready（函数（）{
var minDrawerHeight=0；
var maxDrawerHeight=250；
$（“#抽屉产品”）.css（'height'，minDrawerHeight）；
$（'#menuProducts，#drawerProducts'）。悬停（函数（）{
$（#drawerProducts'）.stop（）.animate（{'height'：maxDrawerHeight}，400，'swing'）；
},
函数（）{
$（“#抽屉产品”）.stop（）.animate（{'height'：minDrawerHeight}，400，'swing'）
});
var minMenuWidth=0；
var maxMenuWidth=120；
$（'#productsMinuHiddeble'）.css（'width'，minMenuWidth）.hide（）；
$（'#productsMenutActivalTests'）.css（'width'，minMenuWidth.hide（）；
$（'#productsMenuTacticalAccessories'）.css（'width'，minMenuWidth.hide（）；
$（'#productsmenucorrection'）.css（'width'，minMenuWidth）.hide（）；
$（'#productsMenuInternational'）.css（'width'，minMenuWidth）.hide（）；
$（'#productsMenuEOD'）.css（'width'，minMenuWidth）.hide（）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='hivable']，#productsmenuhivable”）。悬停（函数（）{
$（#productsMinuHiddeble'）.stop（）.animate（{'width'：maxMenuWidth}，400，'swing'）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='hiddeable']”）.css（{'background-color'：'F60'，'color'：'000'）；
},
函数（）{
$（“#productsMinuHiddeble”）.stop（）.animate（{'width'：minMenuWidth}，400，'swing'）.hide（）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='hiddeable']”）css（{'background'：'none'，'color'：'#ccc'}）；
});
$（“#productsMenuMain>#productsMenuSubmenu>a[name='Tactical']，#ProductsMenutActicalTests，#productsMenuTacticalAccessories”）。悬停（函数（）{
$（“#ProductsMenutActicalTests，#productsMenuTacticalAccessories”）.stop（）.animate（{'width'：maxMenuWidth}，400，'swing'）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='Tactical']）.css（{'background-color'：'F60'，'color'：'000'）；
},
函数（）{
$（#ProductsMenutActicalTests，#productsMenuTacticalAccessories'）.stop（）.animate（{'width'：minMenuWidth}，400，'swing'）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='Tactical']”）css（{'background'：'none'，'color'：'#ccc'}）；
});
$（“#productsMenuMain>#productsMenuSubmenu>a[name='Correctional'，#productsMenuCorrectional”）。悬停（函数（）{
$（“#productsMenuCorrection”）.stop（）.animate（{'width'：maxMenuWidth}，400，'swing'）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='Correctional']）.css（{'background-color'：'#F60'，'color'：'#000'）；
},
函数（）{
$（#productsMenuCorrection'）.stop（）.animate（{'width'：minMenuWidth}，400，'swing'）.hide（）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='Correctional']）.css（{'background'：'none'，'color'：'ccc'}）；
});
$（“#productsMenuMain>#productsMenuSubmenu>a[name='International'，#productsMenuInternational”）。悬停（函数（）{
$（#productsMenuInternational'）.stop（）.animate（{'width'：maxMenuWidth}，400，'swing'）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='International']）.css（{'background-color'：'F60'，'color'：'000'）；
},
函数（）{
$（“#productsMenuInternational”）.stop（）.animate（{'width'：minMenuWidth}，400，'swing'）.hide（）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='International']”）css（{'background'：'none'，'color'：'#ccc'}）；
});
$（“#productsMenuMain>#productsMenuSubmenu>a[name='EOD'，#productsMenuEOD”）。悬停（函数（）{
$（'productsMinueod'）.stop（）.animate（{'width'：maxMenuWidth}，400，'swing'）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='EOD']）.css（{'background-color'：'#F60'，'color'：'#000'）；
},
函数（）{
$（#productsMenuEOD'）.stop（）.animate（{'width'：minMenuWidth}，400，'swing'）.hide（）；
$（“#productsMenuMain>#productsMenuSubmenu>a[name='EOD']”）css（{'background'：'none'，'color'：'#ccc'}）；
});
});

看看这个

---

更新：原来罪魁祸首有一个div，其不透明度过滤器嵌套在另一个div中，而另一个div也有不透明度过滤器。

为了完成此操作，并允许StackOverflow作为独立资源独立存在，您应该简要描述此资源的用途。好发现！

<!--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>

$(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-->
});