Steve's Blog

A flexible and attractive CSS-based dropdown menu that supports multiple levels:

The original Suckerfish Dropdowns article published in A List Apart proved to be a popular way of implementing lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class.

Well now they’re back and they’re more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.

More: Son of Suckerfish Dropdown

A nice tabbed-like CSS-based menu:

I know what you’re thinking…“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are:

1. their secondary options are inaccesible unless you activate the entire menu system; and
2. they offer insufficient orientation cues for the user. It can be difficult to navigate within a particular section of the site because you have to go back to the dropdown to change pages.

This technique is a bulletproof way to ensure browser compatibility and to maintain usability even for people who have old browsers or difficulty accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm. It also does a much better job than standard dropdown menus of orienting the user within the site.

Read article: Hybrid CSS Dropdowns

A great resource for CSS designs

Here you’ll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.

Visit: Dynamic Drive CSS Library

Some examples:

Visit: CSS for Bar Graphs