AdrianRobinson Posted April 18, 2011 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Adam Posted April 19, 2011 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.