I’ve been using this dropdown menu method for a few years now. It seems some clients and marketing departments love complicated dropdown navigation systems and as much as you try to dissuade and convince them that a more simplified navigation scheme would actually help their customers get to the information they want faster, they still insist on using these types of menus.
There have been many ways to do this over the years but when Patrick Griffiths and Dan Webb introduced this method on the ALA site in 2003 and then updated the technique on their HTML Dog site a few months later, it has become the best method I’ve found of creating dropdown navigation. The Suckerfish method uses CSS and HTML lists for the navigation links. A small bit of JavaScript is used to mimic the :hover pseudo class on list items for the Internet Explorer browser.
The sample page I have linked is designed to show some possible implementation methods. The styles and JavaScript are documented and commented so that modifying for your own use is a little easier (and there for me the next time I use it!). Patrick and Dan’s examples were great and showed you how to get these rolling; you were on your own as far as styling for a real world application. The forum on the HTML Dog site was always full of questions about how to do particular styling tricks and each time I went to use the menu system it became a learning experience trying to sort out what CSS rule style would control what part of the navigation.
On my example page you’ll find two menus. One uses background images and various color techniques as well as a second level of dropdowns. The second menu is simpler and is there to show that you can in fact have more than one menu on the same page with a different set of styles. I had to modify the JavaScript to get two menus on one page working and I’m not sure if it’s the best way to do it but it seems to work OK. To make things simpler here, I’ve included the CSS and JavaScript right there in the HTML page (view the source). In a real world scenario, you need to do the right thing and use separate files for your CSS and JavaScript and link them in the head of your document. The CSS involves a star hack in two spots so it won’t validate completely. If that bothers you too much then these menus aren’t for you.
I’ve tested on my Windows XP system and find these menus work in the following browsers:
Firefox 1.5.0.4
IE 6 SP2
IE 5.5
IE 5
IE 7 Beta
Opera 8.5
Netscape 7.2
Netscape 8
These menus don’t work on Netscape 4.7 or IE 5 on the Mac but those browsers are essentially dead anyway. I haven’t tested on Mac or Linux systems as I don’t have access to those – any user tests would be appreciated so post your results to the comments please.
If you read all the comments on the HTML Dog forum, you’ll see reference to adding in keyboard control. A few folks have tried it and this method by Matthew Carroll seems to be one that works (with caveats).
At last!!! A simple aproach to menus! This is a lifesaver, thank you!
why not just use the .htc rollover behaviour and make sure that it is only IE that gets the javascript behaviour
* Peterned – http://www.xs4all.nl/~peterned/
It seems to me like this method handles covering some form elements but when I tried it out w/ a select box the select box comes out on top. Any thoughts on that other than the usual javascript iframe hacks?
James – I just tried adding a selection dropdown to the demo page (offline version on my computer) right under the main menu. The suckerfish dropdown worked as expected and covered the form element.
Is there a page example you can point to showing the issue you’re having?
Dean,
If you use a selectbox, the menu goes underneath it.
Let me know when you’ve found a solution!
Yup, the menu doesnt work well with the select elements. (only IE6) I have applied a fix which sets all the select elements to hidden but it will be a problem if there are more than 1 select elements on the page.
I have posted about this on sitepoint forums, let’s see if someone can help me to fix it or not.
Deep
Very excellent example of the well known suckerfish menu! I use it quite often and like much.
Can someone help me figure out why my drop downs aren’t working in IE?
Please excuse if the code looks sloppy. I’m not the best at this!
http://kittentaboo.com/forestfoundation.html
Sorry, accidentally deleted the original file.
http://www.kittentaboo.com/forest.html
i used this code, but it doesn’t work in IE. I still get flicker while mouseover on sub-menu.
please help.
I just wanted to know if I could use this code for a website that I am developing? Is there any recognition that needs to be posted with the code? It works great in my development phase!!
Go ahead and good luck!
When I deployed the dropdown menu in WordPress, the dropdown menu background color did not show up. I went into the css code and removed the .under from ul.under and it worked. I was wondering what the ul.under stands for?
Hi Dean, thanks for posting a successful implementation of a suckerfish menu system where two menus are present on the same page. For about three months, I have been struggling with this on a website for a coin collection I own. I am not a trained computer tech, and though I have dabbled with HTML programming since the early 1990s, my CSS and Javascript knowledge is pretty limited. I have used your code on my site, and it looks like everything works with the menu structure. However, none of the style changes are taking effect, and after tweaking my code for many days, I am stumped, and would appreciate it if you could take a moment to see if you can spot what I may be doing wrong. The webpage is: http://www.classicaleconomies.com/test. The colors are a bit weird, but this is just for testing. If you want to see how I am trying to get it to look in the end, there is a partially working version (the top menu) at my main site: http://www.classicaleconomies.com. Many thanks in advance for any help you can offer.
Hi again Dean. An update to my previous post — My efforts at tweaking your code have resulted in a successful application on my website. Please feel free to have a look at, as it is a vertical menu vs. your horizontal. Thanks again for posting your solution to the two-menus-on-one-page suckerfish problem!
Looks great, but my attempts to modify the content can’t get past the first character.What am I doing wrong?
“It seems some clients and marketing departments love complicated dropdown navigation systems and as much as you try to dissuade and convince them that a more simplified navigation scheme would actually help their customers get to the information they want faster”
What do you suggest for “more simplified navigation scheme”?
Doesnt work well on page with floated divs