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

Question

我有一个带动画子菜单的动画下拉菜单，可以在FF，Chrome，Safari浏览器中精美地工作......但是，当然，IE很困难。在这一点上，我只有建立了产品菜单。

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

当您将鼠标悬停在产品下的其中一个子菜单项目上时，另一个子菜单向右射出更多项目。

在IE浏览器中，如果我真的很快就可以拍摄出第一个子菜单。即使那样，它似乎只是想部分动画。另外，我的子菜单项目似乎都不接受他们的a：悬停样式。

任何想法？

这里是一个链接：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

更新：原来，罪魁祸首是具有嵌套在另一个DIV也有不透明度滤光器内不透明度滤光器一个div。

Answer 2

看看这个

http://www.xs4all.nl/~peterned/csshover.html