Suckerfish dropdown menu working in Chrome but not in IE6.

AdrianRobinson

04-18-2011, 03:36 PM

I am trying to develop a Suckerfish dropdown menu by following the instructions on the Suckerfish website. My code works in Google Chrome but not in Internet Explorer 6. The following is my code:

<script type="text/javascript">

shHover = 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);

</script>

<style type="text/css">

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li: hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title?></title>
</head>
<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</body>

What am I missing here? I'm thinking it may have to do with the JavaScript.

teedoff

04-18-2011, 03:47 PM

AdrianRobinson

04-18-2011, 03:53 PM

Yes, same order.

teedoff

04-18-2011, 04:11 PM

Try moving everything above your doctype to inside your <head></head> tags. As it is, that code is invalid.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title?></title>
<script type="text/javascript">

shHover = 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);

</script>

<style type="text/css">

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li: hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

</style>

</head>
<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</body>
</html>

I also added a closing </html> tag which was missing(?) from your posted code. I added a complete doctype as well.

teedoff

04-18-2011, 04:19 PM

Still wont work correctly though. You still have some errors in your code. If you go back through the tutorial for the suckerfish menu, you will see. You can also run your new code through the validator (http://validator.w3.org)to see the errors.

abduraooft

04-18-2011, 04:57 PM

teedoff

04-18-2011, 05:14 PM

Any clues?

lol yep typoes there too. I didnt even look at his javascript, since his mark-up was a mess.