CSS Drop Menus

[eyecrave]

Hello,

I had this working on IE6, IE7, and Firefox when I first copied the code from alistapart, but after adding different colors and text the dropdowns fail to appear in IE6.

The page where this is failing is http://test.the-harbour.ca/public_html/

Access to the css is here and the code is near the bottom of the document #menu_nav. http://test.the-harbour.ca/public_html/layout/professional/style.css

and the javascript I used can be found about half way down on this page.
http://www.htmldog.com/articles/suckerfish/dropdowns/

Any help here would be greatly appreciated as I've gone over the code multiple times and everything looks fine.

Thanks,

Shane

[Kravvitz]

The .js file seems to be missing.

[eyecrave]

The .js file is called in the header. Should I call it elsewhere or another way?

<script type="text/javascript" src="http://test.eyecravedvd.com/public_html/javascript/drop_down.js"></script>

Here's the actual Javascript


sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Instead of calling the file should I just put that directly in the header?

[Kravvitz]

I meant what I said. Try going to where the file is supposed to be. I get a 404 (file not found) error when I try.

It's best to keep it in an external file.

I know what the code looks like. :p I've used the Suckerfish menu system many times.

[eyecrave]

I'll check that out. Thanks. I guess I missed that. I'll let you know how it goes. If it was that simple... sheesh! Isn't it always.

[eyecrave]

Alright. I'm a complete moron. I was pointing the script to the wrong domain. That's the other site I maintain.

Now, I just have to figure out that stupid spacing issue in IE6. Any thoughts on that one?

[Kravvitz]

In your CSS change
* html #menu_nav ul li { float: left; }
to
* html #menu_nav li { float: left; }

[eyecrave]

Thank you. It works perfectly now. Resolved.