CSS Drop Down IE6 Issue

Hello, I was wondering if anyone could help me. It seems my drop down menus don't work in IE6. They do work in IE7,8,Firefox and Safari. Can anyone tell me why? The website is: https://dr4lnb.4lnb.com and the code is:
[CODE]

/*Top Navigation Drop Down Menu */
#globalNav {color:#666;margin:0;padding:0;width:800px; }

/* remove all the bullets, borders and padding from the default list styling */
#globalNav ul {padding:0;margin:0;list-style-type:none;display: inline;}
#globalNav ul ul {width:149px;background-color: #fff;color:#666;display: inline;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#globalNav li {float:left;width:auto;position:relative;padding:0 10px 0 15px;color:#666;}
#globalNav li li {float:left;width:auto;position:relative;padding:0 0 0 0;margin:0 0 0 0;background-color: #fff;color:#666;}
#globalNav li li li{float:left;width:auto;position:relative;padding:0 0 0 5px;background-color: #fff;color:#666;}
/* style the links for the top level */
#globalNav a {display:block;font-size:12px; text-decoration:none; color:#666; width:auto; height:30px; border:0; line-height:29px;display: inline; }

/* style the second level background */
#globalNav ul li a.drop { background-image:url(../images/down.jpg); background-position: right center; background-repeat:no-repeat;padding:0 20px 0 0;}

/* style the second level hover */
#globalNav ul li a.drop:hover{url(../images/right.gif) no-repeat 130px center;color:#666; }
#globalNav ul ul :hover > a.drop { url(../images/right.gif) no-repeat 130px center;color:#666;}
/* style the third level background */
#globalNav ul ul ul a.test {color:#666;padding:0 20px 0 0;}
/* style the third level hover */
#globalNav ul:hover ul:hover ul li a.test:hover{url(../images/right.gif) no-repeat 130px center;}
#globalNav ul ul ul :hover > a.test { url(../images/right.gif) no-repeat 130px center;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#globalNav ul ul {visibility:hidden; position:absolute;height:0;top:25px;left:0; width:140px;}

/* position the third level flyout menu */
#globalNav ul ul ul{left:140px; top:-1px; width:140px;color:#666}

/* position the third level flyout menu for a left flyout */
#globalNav ul ul ul.left {left:-140px;color:#666;}

/* style the second level links */
#globalNav ul ul a { color:#0068b2; height:auto; line-height:1em; padding:5px 0 5px 15px; width:128px;border-width:0 1px 1px 1px;margin:0;}

/* make the second level visible when hover on first level list OR link */
#globalNav ul li:hover ul,
#globalNav ul a:hover ul{visibility:visible;color:#666;}
#globalNav ul:hover ul li a:hover{background-color: #0466af; color:#fff;}
/* keep the third level hidden when you hover on first level list OR link */
#globalNav ul:hover ul ul{visibility:hidden;}
#globalNav ul:hover ul ul li:hover{background-color: #0466af;}
#globalNav ul ul ul a { line-height:1em; padding:5px 0 5px 0; width:140px;border-width:0 1px 1px 1px;}
/* make the third level visible when you hover over second level list OR link */
#globalNav ul:hover ul:hover ul{ visibility:visible;}
#globalNav ul li.sep{color:#666;margin:0;padding:.8em 0;font-size:80%;}
[CODE]

It's because IE6 doesn't support :hover other than on a elements. You'll need a javascript solution. Have a look here (http://htmldog.com/articles/suckerfish/hover/) or here (http://www.xs4all.nl/~peterned/csshover.html).

Thanks but I still don't think it's working unless I did something wrong. I uploaded the HTC file to my site and added the code to the body tag but it still doesn't seem to work. I tried the javascript ides as well, no luck. Any other ideas?

body{behavior: url("csshover3.htc"); }

I think css hover expects the .htc to be in the same directory as the css file. Try moving your htc file or setting:

body{behavior: url("/csshover3.htc"); }

No, IE6 does support it. That's why it was built in the first place.

Thanks for the feedback. I gave that a try (moved the htc file into the same folder as the CSS) but it still doesn't seem to be working. I'm wondering if it has something to do with the face that my actual navigation is being populated through an include (inc) file in a separate folder? Any ideas? Thanks again!

Hmm. Only other thing I can suggest re the .htc file is to try version 2 of csshover. That's the one I've used and I have a vague recollection that version 3 gave me some problems as well.

If that still doesn't work then the suckerfish solution's your best bet. Here, remember that you'll need to change the id to match your own, so this:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
etc....

needs to change to:

sfHover = function() {
var sfEls = document.getElementById("globalNav").getElementsByTagName("LI");
etc....

Thank you very much, I think the suckerfish option worked!! I had tried that originally and it didn't work but this time it did. (I must have been missing something the first time.)

It doesn't look quite the same as it does on the other browsers, but hopefully I can tweak that. Thank you very much for your help!!:)