Suckerfish dropdown menu working in Chrome but not in IE6.

AdrianRobinson · April 18, 2011

I am trying to develop a Suckerfish dropdown menu by following the instructions on the Suckerfish website. I will later try to implement Suckerfish dropdown menus in a project for work. My code seems to work in Google Chrome but not in Internet Explorer 6. The dropdown menus do not appear on hover in IE 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 posted my code in this section because I believe my problem is related to JavaScript. Any suggestions would be greatly appreciated.

Adam · April 19, 2011

Newer browsers don't need that JavaScript for the menus to work - the CSS does it all. By attaching the event using "attachEvent", which is only supported in IE (<= 6/7?), the JavaScript is only triggered in browsers which need it. When IE6/7 is triggering this code however, you have a typo in the function name. It should be:

if (window.attachEvent) window.attachEvent("onload", shHover);

Also JavaScript is case-sensitive, and in your call to document.getElementByID you have "ID", which should be "Id".

by the way, those styles and JavaScript should be within the <head></head> tags of your document.

Sign In

Suckerfish dropdown menu working in Chrome but not in IE6.

Recommended Posts

AdrianRobinson

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information