jQuery dropdown mit animierten Sub Nav funktioniert nicht in IE

Ich habe ein animiertes Dropdown-Menü mit animierten Subnavs, die wunderbar in FF, Chrome, Safari funktioniert ... aber natürlich ist IE schwierig. An diesem Punkt habe ich nur das Produktmenü erstellt.jQuery dropdown mit animierten Sub Nav funktioniert nicht in IE

Ich verwende .hover und .animate, um die Breite von divs zu erweitern, die Untermenüpunkte enthalten.

Wenn Sie mit der Maus über einen der Untermenüpunkte unter Produkte gehen, schießt ein weiteres Untermenü mit mehr Elementen nach rechts.

In IE kann ich das erste Untermenü bekommen, um zu schießen, wenn ich wirklich schnell darüber mousing bin. Auch dann scheint es nur teilweise animieren zu wollen. Darüber hinaus scheint keiner meiner Untermenüpunkte ihre a: Hover-Stile zu akzeptieren.

Irgendwelche Ideen? Hier

ist ein Link: 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--> 
});

Quelle

2011-01-07 Banjo Drill

UPDATE: Es stellt sich der Täter aus wurde in einem anderen div verschachtelt ein div mit der Opazität Filter, die auch die Opazität Filter hatte.

Quelle

2011-01-10 19:27:45

Werfen Sie einen Blick auf diese

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

Quelle

2011-01-07 01:16:39 Calum

Zum Abschluss und damit StackOverflow eigenständig als eigenständige Ressource verfügbar ist, sollten Sie kurz beschreiben, worum es bei dieser Ressource geht. Guter Fund! – jmort253

jQuery dropdown mit animierten Sub Nav funktioniert nicht in IE

Antwort

Verwandte Themen