Want the code? View Source in your browser.

CSS Tabs with Submenus

This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists. The home tab has no subitems, the rest do, so please click around.

What makes this different from some of the other implementations out there?

This is tested in...

Non-graphic browers like Lynx or screen readers will get a nested bulleted list. It breaks horribly on Netscape 4 on all platforms, so if that matters to you, hide the stylesheet from that browser. IE 4 on Windows shows the menus as a vertical list. IE 5.0 has some slight isues with the content border not completely touching the lower tab border. On Opera 5 and 6 for both Windows and Mac the menus are usable, but the formatting's off. Submenus were fixed in Opera 7.1 thanks to a suggestion from Andreas Bovens.

Thanks to compatibility reports from Daniel Von Fange, "Choan," Michael Roper, Yolande McLean, Andreas Biedermann, Chris Mendis, and Dianne. Special thanks to Vincent Flanders who sent in screens from 28 browsers through Brower Cam.

Reports of bugs on other browsers are appreciated. Screenshots of correct and incorrect displays on other browsers are appreciated even more. Send all to csstabs@kalsey.com.

Much of the CSS is adapted from Dan Cederholm's example.

Don't like my CSS tabs? Try these:

You might also be interested in my blog entry on the subject.


Want to translate this into your own language? Translate the English version, keeping all the HTML intact and email to adam AT kalsey.com.

© 2003 Adam Kalsey.