Problems with “Son of Suckerfish” menus and IE, Opera, Safari

Well, I see several reasons why this is going wrong. (I use Son of Suckerfish quite a bit – it’s one of my favorite dropdowns to use!)

First, you should start off by validating your code. Any errors in validation will cause your page to be desiplayed in “quirks” mose, instead of standards mode. An inital check of your markup shows 69 errors. You should clean up those errors and get your (X)HTML and CSS to validate and that’s one big step in helping to fix things.

You also have your .sfhover script within the body tag. it should be in the header of your document.

Your li’s are NOT contained within a UL element – which is a big contributor to the non-validation, as well as the non-functioning of your menu.

Basically, the SOS dropdowns are *very* easy to use, as long as you keep your semantics correct. Your menu should look more like so:

<div id="menu">
<ul id="nav">
<li><a href=#">link 1</a>
<ul>
<li><a href="#">link2</a></li>
</li>
</ul>
</div>

The DIV itself is simply a containing element – nothing more. The UL is what defines the actual dropdown list. It’s a block that contains your entire menu and the base layout of the menu itself. The first LI would be the very first menu item. You can end that link with a closing LI tag – therefore no dropdown, *or* you can add a dropdown by NOT closing the LI before adding in another UL block for the second tier.

UL’s are *necessary*. Validation is *necessary* for these to work, as it’s a standards-compliant menu system, and relies on valid code to function properly.

Start wtith that stuff, and it may get you further than you think.

the javascript posted at invoke doesn’t work ( i had the same problem). paste the script from his sourcecode:

<script language=”javascript” type=”text/javascript” >
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (i in sfEls){
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>

this solved the problem for me.

my problem is as follows:

i wish to implement son of suckerfish on this theme: https://www.openswitch.org/2006/04/16/unsleepable/ , but am not able to make the submenubuttons in a decent size. the size of them becomes the same as the size of the buttons in the theme (about, contact, links etc), and it looks kinda ugly…

To muddle the water a bit, I’d like to offer “grandson of suckerfish, modified again!”

https://carroll.org.uk/sandbox/suckerfish/bones2.html

Basically allows you to actually use the menu using only keyboard navigation (use the tab key to go from one link to the other). Increases accessibility tremendously ?? If you care for such things, of course.

Vavroom, how can I download and implement your “grandson of suckerfish”?

I have managed to create a working menu!

https://www.ads-software.com/support/topic/99723?replies=1