I’ve got an animated dropdown menu with animated subnavs that works beautifully in FF,

Question

0

Asked: May 19, 20262026-05-19T03:26:13+00:00 2026-05-19T03:26:13+00:00

I’ve got an animated dropdown menu with animated subnavs that works beautifully in FF,

0

I’ve got an animated dropdown menu with animated subnavs that works beautifully in FF, Chrome, Safari…but, of course, IE is being difficult. At this point, I’ve only got the Products menu built.

I’m using .hover and .animate to expand the width of divs containing submenu items.

When you mouse over one of the submenu items under Products, another submenu shoots out to the right with more items.

In IE, I can get the first submenu to shoot out if I’m really quick mousing over it. Even then, it only seems to want to animate partially. In addition, none of my submenu items seem to be accepting their a:hover styles.

Any ideas?

Here is a 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-->
});

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-19T03:26:13+00:00

Editorial Team

2026-05-19T03:26:13+00:00Added an answer on May 19, 2026 at 3:26 am

UPDATE: It turns out the culprit was having a div with the opacity filter nested inside another div that also had the opacity filter.

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’ve got an animated dropdown menu with animated subnavs that works beautifully in FF,

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply