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
Ian Andolina: CSS Tabbed Navigation

Posted on August 9, 2003 in CSS