Horizontal Suckerfish and More CSS Menu Resources

I blogged back in June about my efforts to enhance WebLens with CSS-based dropdown menus that were standards compliant and which work across all browsers, including the persnickety Internet Explorer. In a post on creating dropdowns that work in IE, I summarized the three approaches I had found. I chose the very popular Suckerfish solution for WebLens, and it has been a great success.

In building the menu system recently for a site about a popular Canadian television personality, I wanted to modify the Suckerfish code to display the sub-menus horizontally in a row instead of stacked one below another as seen on WebLens. Google queries on this didn't lead to much, except a few help requests posted to webmaster forums, so I puzzled it out myself.

You can see the result of this tweak at the site mentioned above, and the code is available here for your use, should you want to play with it. I'm pretty happy with it; the only failing has been my inability to figure out how to align the sub-menus with the left edge of the top menu containing DIV, instead of the individual list items. No amount of fiddling around with positioning seemed to solve this.

In trying to troubleshoot this challenge, I never did find a fix, but I came across more helpful CSS menu resources, including some great articles:

• aListApart: Hybrid CSS Dropdowns
• aListApart: Sliding Doors of CSS
• Vitaly Friedman's round-up of 37 CSS Navigation Techniques
• Stu Nicholls' Validating Flyout Menu

Had I seen the ListApart Hybrid CSS Dropdowns article earlier, I might have chosen that technique instead of struggling to modify the Suckerfish code myself. Oh well. Live and learn :-)

I can't wrap this up without mention of a couple of CSS and/or DHTML menu generators (free and/or for fee) for those not inclined to hand code. Check these out:

• Colly's CSS Rollover Generator
• Webmaster Toolkit's CSS Menu Generator
• ProjectSeven's Pop Menu Magic
• Brothercake's Ultimate DHTML Dropdown Menu

Hope you find these resources useful. Enjoy!