I can't get the dropdown menu on this website to work in IE6. I tried the this method, but I just can't get it to work. Here's my menu's CSS *updated:

#nav{border:none; float:left; width:900px; font-family:Verdana, Geneva, sans-serif; 
font-size:102%; position:relative; z-index:25; margin-top: 206px;}
#nav ul {list-style-type:none;}
#nav ul li {float:left; position:relative; z-index:10;}
#nav ul li ul {display:none; border:none;}
#nav ul li ul {margin-left:-30px; padding:0 30px 30px 30px;}
#nav ul li a {float:left; display:block; height: 3.0em; line-height: 2.9em; margin: 1px; 
padding: 0px 16px 0px 16px; text-decoration:none; font-weight:bold; color: #000099;}
#nav ul li:hover,  #nav ul li.sfhover {width:auto;}
#nav table {position:absolute; z-index:999; top:0; left:0; border-collapse:collapse;}
#nav ul li:hover a, #nav ul li.sfhover a{background-color: #ffffff; text-decoration:none;}
#nav ul li:hover ul, #nav ul li.sfhover ul {display:block; position:absolute; z-index:8000; 
top:3.1em; left:0;}
#nav ul li:hover ul li ul, #nav ul li.sfhover ul li ul {display: none;}
#nav ul li:hover ul li a, #nav ul li.sfhover ul li a {display:block; width:10em; height: auto; 
line-height:1.2em; margin:0px -1px 0px 0px; padding:4px 16px 4px 16px; border:solid 1px 
rgb(175,175,175); background-color: #ffffff; font-weight:normal; color:rgb(50,50,50);}
#nav ul li:hover ul li a:hover, #nav ul li.sfhover ul li a.sfhover {background-color: 
#f6b072; text-decoration:none;}

And here is the javascript:


I'm not sure what I'm missing, but any help would be greatly appreciated. Thanks!

4 answers

danwellman 5600
This was chosen as the best answer

IE6 is throwing a script error on line 19, which is the line:


The error states that:

document.getElementById(...) is null or not an object

Looking through the source code it seems that the container for the nav element has the class nav and not the id nav, which would explain why the script is throwing the error...

Answered about 6 years ago by danwellman
  • Wow, that seems like a pretty silly thing to have missed! I went ahead & changed the div from class to id & updated the CSS to #nav, but it still seems to not be working. Kim Lynch about 6 years ago
  • The CSS has been updated in my question. Kim Lynch about 6 years ago
Tony B 86

your nav won't work without additional javascript in IE6 because IE6 doesn't recognize the :hover pseudo class on anything except anchors so all of your your ul li:hover areas will be ignored.

Answered about 6 years ago by Tony B
  • It is using javascript. The snippet that was mentioned in the answer above was from that javascript. I'll post it in my above answer, as well. Kim Lynch about 6 years ago
danwellman 5600

Ok, IE6 is still throwing an error, the error is on line 19 again, the same line as before, but it now says:

Object doesn't support this property or method

Which probably means that IE6 doesn't like chaining the getElementById() and getElementsByTagName() methods together. Try changing the script to this:

var sfParent = document.getElementByID("nav"),
    sfEls = sfParent.getElementsByTagName("LI");

That should work in IE6 and other browsers...

Answered about 6 years ago by danwellman

Got it! I moved the javascript to an external file & then it took. I think it had to do with the way I was calling on the script given my doctype...? I'm not really sure, but it seemed to fix the problem. Also, had you not pointed out that I was using class instead of ID I never would've got it working, so thanks a bunch, danwellman!

Answered about 6 years ago by Kim Lynch
  • No worries, glad to help in some way :) danwellman about 6 years ago