CSS dropdown menu browser compatibility pb

[echaland]

1) Script Title: Dropdown menu arrow.gif displays fine in Netscape/Safari/FireFox/IE 7 but doesn't work in IE 6/5.x

2) Script URL:
I've created 2 CSS scripts one for ie using the condition <!--[if lte IE 6]>

I display an arrow when there is a sub-menu, the arrow bitmap toggles when a sub menu is selected.

My general CSS is:
.menu ul li:hover ul li a.drop {background:#0066CC url(../images/arrow.gif)
99px 7px no-repeat; color:#FFFFFF; }

.menu ul li:hover ul li a.drop:hover {
background:#0066CC url(../images/arrow_roll.gif) 99px 7px no-repeat;}

For IE 6 and 5.x I have defined:
.menu ul li a:hover ul li a.sub {background:#0066CC url(../images/arrow.gif)
99px 7px no-repeat;}

.menu ul li a:hover ul li a.sub:hover {background:#0066CC
url(../images/arrow_roll.gif) 99px 7px no-repeat;}


3) Describe problem: The problem with IE 6/5.x is that the arrow_roll.gif never get displayed (however the arrow.gif get displayed). "sub" and "drop" are defined as classes.

What I am doing wrong? Also I've noticed lots of flickers in IE 6/5.5 The dropdown tend to disappear sometimes. Any pointers?

Thank you for your help.

Eric

[ddadmin]

Hmmm are you talking about a specific menu on DD? Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

[echaland]

Thanks. Yes, sorry I forgot the script.
The script I'm using is: http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/

I've got everything working now for IE7 and IE 6 but in IE 5.5 only first level sub-menu shows up and in IE 5.01 only the main menu shows up. I'm getting less and less stuff :-)

Here is my CSS when this statement is true <!--[if lte IE 6]>



.menu ul li a.drop, .menu ul li a:visited.drop {display:none;}
.menu ul li a:hover ul li a.drop {display:none;}
.menu ul li a:hover {color:#000066; background:#0066CC;} /* main menu hover */

/* display dropdown1 while Hover main menu */
.menu ul li a:hover ul {display:block; visibility:visible; background-color:#0066CC; position:absolute; top:35px; left:0; width:116px; border-right:1px solid #000066; border-bottom: 1px solid #000066; font-size:11px; line-height:20px;
height:20px; padding-left:2px;}

.menu ul li a span{
float:left;
display:block;
padding: 0 12px 0 3px;
}

.menu ul li.current a, .menu ul li a:hover {background: url(../images/menu_hover_left.gif) no-repeat; background-position:left;
}

.menu li.current a span, .menu ul li a:hover span{ background:url(../images/menu_hover_right.gif) no-repeat right top;}

/*dropdown1 with sub menu2... doesn't work in IE 5.x */
.menu ul li a:hover ul li a.sub {display:block; visibility:visible;
background:#0066CC url(../images/arrow.gif) 99px 7px no-repeat; }

.menu ul li a:hover ul li a.sub:hover {display:block; visibility:visible;
background:#0066CC url(../images/arrow_roll.gif) 99px 7px no-repeat;}

.menu ul li a:hover ul li a ul {display:block; visibility:hidden; position:absolute;
height:0; width:0;}

.menu ul li a:hover ul li a {display:block; background:#0066CC; color:#FFFFFF;
text-align:left; padding-left: 2px;
width: 100px; height:20px; line-height:20px;
font-size:11px; }

/*selection menu item dropdown 1 and 2 */
.menu ul li a:hover ul li a:hover {display:block; background:#0066CC; color:#000066;}

/* dropdown menu 2....doesn't work in IE 5.x */
.menu ul li a:hover ul li a:hover ul {display:block; visibility:visible; position:absolute; left:114px; top:0;
padding-left:2px;
width:100px;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #FFFFFF;
}

.menu ul li a:hover ul li a:hover ul.left {left:-116px;}


Thank you