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?

• The subnav items are nested as children of their associated tab in the HTML.
  This leaves the markup sematically correct. If you view the page without the stylesheets, the navigation still makes sense.
• The list markup doesn't change from page to page.
  The highlighted tab is determined from the ID of the body element, not by changing the IDs of each tab.

This is tested in...

• Windows
  • Mozilla (1.1, 1.2, 1.3 and Firebird 0.6)
  • Netscape 6.2, 7.0,
  • Opera 7.1
  • Internet Explorer (6, 5.5, 5.0*)
  • AOL 7
• Mac
  • Mozilla 1.1, Firebird 0.6
  • Safari 1.0, 1.0 beta 2
  • Netscape 7.02
  • Camino 0.6
  • IE 5.0, 5.2
• Linux
  • Mozilla 1.3
  • Netscape 7.0
  • Konqueror 3.1-13

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:

• Mark Pilgrim
• Dan Cederholm
• Joshua Kaufman
• Ian Andolina
• Alex Russel
• Radu Darvas

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

Translations

• English (original)
• Belorussian (translated by PC)

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