jQueryのドロップダウンがIEで動作しないアニメーションサブナビを使用しています

Question

FF、Chrome、Safariで美しく動作するアニメーションサブナビを持つアニメーションドロップダウンメニューがありますが、もちろんIEは難しいです。この時点では、Productsメニューしか構築されていません。

私は.hoverと.animateを使用して、divを含むサブメニュー項目の幅を広げています。

[製品]の下のサブメニュー項目の1つにマウスを重ねると、別のサブメニューがより多くの項目とともに右側に表示されます。

IEでは、私が本当にすばやくマウスオーバーすると、最初のサブメニューが表示されます。それでも、部分的にアニメートするだけのようです。さらに、私のサブメニューアイテムのどれも、ホバースタイルを受け入れているようには見えません。

アイデア？ここで

はリンクです：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

UPDATE：それは犯人がまた不透明フィルターを持っていた別のdiv内にネストされた不透明度フィルターとのdivを持っていたが判明しました。

Answer 2

この

を見てみましょう

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