Don't use a strict javascript approach to building suckerfish menus. Use CSS, and only add javascript to support hover on non-anchor elements in IE6.
Use the Son of Suckerfish page for the basics. http://www.htmldog.com/articles/suckerfish/dropdowns/ Here is a complete working example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";> <html> <head> <title>Suckerfish Dropdowns - Two Level Bones</title> <style type="text/css"> body { font-family: arial, helvetica, serif; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1; } #nav a { display: block; width: 10em; } #nav li { /* all list items */ float: left; width: 10em; /* width needed or else Opera goes nuts */ } #nav li ul { /* second-level lists */ position: absolute; background: orange; width: 10em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ } #nav li ul ul { /* third-and-above-level lists */ margin: -1em 0 0 10em; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } #content { clear: left; color: #ccc; } </style> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ if($.browser.msie){ $("#nav li").hover( function () { $(this).addClass("sfhover"); }, function () { $(this).removeClass("sfhover"); } ); } }); </script> </head> <body> <h1>PERCIFORMES! (2)</h1> <p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a> <ul> <li><a href="#">Echeneis</a></li> <li><a href="#">Phtheirichthys</a></li> <li><a href="#">Remora</a></li> <li><a href="#">Remorina</a></li> <li><a href="#">Rhombochirus</a></li> </ul> </li> <li><a href="#">Tilefishes</a> <ul> <li><a href="#">Caulolatilus</a></li> <li><a href="#">Lopholatilus</a></li> <li><a href="#">Malacanthus</a></li> </ul> </li> <li><a href="#">Bluefishes</a> <ul> <li><a href="#">Pomatomus</a></li> <li><a href="#">Scombrops</a></li> <li><a href="#">Sphyraenops</a></li> </ul> </li> <li><a href="#">Tigerfishes</a> <ul> <li><a href="#">Amniataba</a></li> <li><a href="#">Bidyanus</a></li> <li><a href="#">Hannia</a></li> <li><a href="#">Hephaestus</a></li> <li><a href="#">Lagusia</a></li> <li><a href="#">Leiopotherapon</a></li> <li><a href="#">Mesopristes</a></li> <li><a href="#">Pelates</a></li> <li><a href="#">Pelsartia</a></li> <li><a href="#">Pingalla</a></li> <li><a href="#">Rhyncopelates</a></li> <li><a href="#">Scortum</a></li> <li><a href="#">Syncomistes</a></li> <li><a href="#">Terapon</a></li> </ul> </li> </ul> </li> </ul> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p> <p><a href="/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="/ptg/">Patrick Griffiths</a> and <a href="http:// www.danwebb.net">Dan Webb</a>.</p> </div> </body> </html>
