CSS Tabs

While working on a project at my daytime job I needed to find a good way of using CSS to create a tabbed menu with submenus. I couldn’t find any method that works exactly the way I want, so I decided to use the knowledge I got from studying all those examples and try to build something that does.

I’m not quite there yet. And I think what I want may not be possible. The ideal tabbed menu would have the following features:

• Tabs are based on nested, unordered lists.
• When text is rezised in the browser, the menu doesn’t break.
• Em or % is used to specify text size.

I haven’t figured out how to make a CSS based tabbed menu that meets all of those requirements. What I have is two examples. One uses separate lists for the top and sub menus. It works pretty well when text is resized. The other uses nested lists. I haven’t figured out any other way to position the sub menu below the top menu than to use absolute positioning, which makes the whole thing break when text is enlarged in the browser. The top menu gets obscured by the sub menu.

Neither of these uses em or % to specify sizes. I gave it a try, but had to give up.

So, if anyone knows a way to meet all three requirements, or can tell me how to build CSS tabs using units that even IE/Win can scale, please contact me.

Some other CSS based tabs:

• Adam Kalsey: CSS tabs with Submenus
• Steve Clay: Stretchy Tabs
• Marek Prokop: Horizontal Menus
• Mark Pilgrim: Pure CSS tabs
• Ian Andolina: CSS Tabbed Navigation
• Radu Darvas: Example of CSS-driven tabs

• August 9, 2003
• Comments closed
• Posted in CSS

• Previous post: Link flood
• Next post: RSS

Information, sponsorship, and externals

Best of 456 Berea Street

Inverted Sliding Doors tabs (view demo)

Doug Bowman’s Sliding Doors technique for creating flexible tabs, turned upside down.

The alt and title attributes

Guidelines on how and when to use the alt and title attributes.

Does accessibility encourage discrimination?

Is it acceptable to be accessible to people with disabilities but inaccessible to people that use alternative web browsers?

HTML tags vs. elements vs. attributes

Learn the difference between tags, elements, and attributes in HTML.

Reveal your old school web development hacks

A collection of old school web design and development hacks.

More popular articles

Random places to go

• Beast-Blog.com
• Clagnut
• Lillbra
• meyerweb.com
• Le «blog personnel» de Joe Clark
• Standards-schmandards
• Design View / Andy Rutledge
• Accessify
• Jens Meiert
• The Autistic Cuckoo