CSS tabs with Submenus

Freshness Warning
This blog post is over 17 years old. It's possible that the information you read below isn't current and the links no longer work.

There’s lots of talk recently about creating tabbed menus with CSS, but very little about associating submenus to the tabs. Joshua Kaufman and Richard Rutter have done it, but their methods require the creation of separate unordered lists that are only associated with the parent menu by the CSS. If you view the page without the stylesheet — with a screen reader for example — the navigation is confusing and impossible to decipher.

I created a method of adding submenus to your tabbed navigation in which the submenu lists are nested into the parent navigation list list. So anyone not using CSS will see a menu that looks like…

  • Home
  • About Us
    • People
    • Careers
  • Contact Us

… and everyone else will see a tabbed menu like …

Screen capture of CSS tabs

I’ve put up a demo page for your enjoyment.

Update: I forgot to mention: please feel free to use the code and mangle or adapt it as needed. If you use it would be nice if you’d tell me where. I’m just curious where it ends up.

Carsten Kollmeier
February 9, 2007 12:39 AM

Hi! Your tabs navigation is exactly what I was looking for, thanks! But I figured out some more: To do an easier positioning of the submenu, I put the whole tab-menu into a div-container with the property "position: relative". Now all enclosed tags with the property "position: absolute" are positioned relatively to the enclosing div. For explorer to work, you have to give the uppermost ul the property "position: static", because explorer otherwise seems to inherit the "position" property from the enclosing div. Furthermore I enhanced your menu to allow some javascript navigation. See yourself at http://neu.nabeba.de I'm planing to document this stuff a bit more understandable as soon as I find the time.

JM
February 22, 2007 3:20 PM

Your Tabs Rock!

Carsten Kollmeier
March 12, 2007 7:07 AM

Hi again! Unfortunatly the javascript-enhance tabs-navigation I mentioned two posts before is not found under the old URL. This is because it's the location where I test new stuff before implementing it at the live site. IF you are interested how the javascript stuff looks like: http://www.nabeba.de . Still, I did not find the time to write a brief tutorial.

youn
May 4, 2007 10:58 AM

i saw some of these tabs on a jeans and clothing website luxuriousgear.com

Vent Swap
May 4, 2007 5:40 PM

I've tried your demo but it breaks up in IE7

Jon
June 14, 2007 6:11 PM

Am about to embed your tabs (sans sub-menus) in a brand new time-clock product -- you know, the kind in so many warehouses that employees use to punch in / out. The clock features an embedded web server. The product is distributed through major retailers (e.g. Best Buy, Costco, etc.). If it passes our cross-browser testing, it ships ;-) Good work on keeping things simple and elegant. Thanks.

IE7 Fix
June 18, 2007 2:39 AM

To make the submenus look good in IE7, change the css rules that go: body.section-1 #menu ul#subnav-1, etc., change: top: 95px to: top: 100px. Obviously, this will change the way things look in other browsers, so this is not the final solution. Hopefully someone will be able to use this lead to fix the stylesheet.

Avinash Kachhy
August 29, 2007 2:20 PM

I am trying to display a div a ta time on a single html page using css tabs and a javascript function to unhide the correct div and hide the other divs. It works fine but the first time the page loads, all the tabs are in the inactive style. I cannot use the body style for showing the correct active tab. I need to have the left most tab show as active when the page loads but behave as any other tab once any other tab is clicked. I tried generating a click event to change the background on load event, etc. but the display is not affected. Any help will be appreciated. Thanks.

E_McC
February 1, 2008 4:28 AM

I am trying to re create the tabs but only want the sub nav as the main nav. I want to know what type of files as the tools/csstabs/1 , /2, /3 and /4? are they just seperate CSS files? Also I don't want to go to a new page everytime you click one of the buttons. I just want the text to change? Could you help me out with this matter? Thanks

Nutan
December 13, 2008 3:42 AM

Your tab menu is very useful but yet i can't create menu in which i can show link which is visited in different color as that of other links. how can i do that? can u help me?

Owolabi
June 15, 2009 1:05 AM

I would have loved to use the css sample code to imbibe to my website but could not see it downloaded. Can you send it to my mail please? Thanks

Angela
August 14, 2009 12:01 PM

The subnav items are floating above the page in the banner area, what have i done wrong? is it because i added floating pictures?

Rayane
October 31, 2009 12:31 AM

Thanks for this code, could any one send the zip file into my mail: aburayane@gmail.com, can't find the download link. Thanks in advance

shaikh farhan
March 1, 2010 2:43 AM

Hi for where to get the code for this thanks

shaikh farhan
March 1, 2010 2:43 AM

Hi form where to get the code for this thanks

These are the last 15 comments. Read all 117 comments here.

This discussion has been closed.

Recently Written

The Trap of The Sales-Led Product (Dec 10)
It’s not a winning way to build a product company.
The Hidden Cost of Custom Customer Features (Dec 7)
One-off features will cost you more than you think and make your customers unhappy.
Domain expertise in Product Management (Nov 16)
When you're hiring software product managers, hire for product management skills. Looking for domain experts will reduce the pool of people you can hire and might just be worse for your product.
Strategy Means Saying No (Oct 27)
An oft-overlooked aspect of strategy is to define what you are not doing. There are lots of adjacent problems you can attack. Strategy means defining which ones you will ignore.
Understanding vision, strategy, and execution (Oct 24)
Vision is what you're trying to do. Strategy is broad strokes on how you'll get there. Execution is the tasks you complete to complete the strategy.
How to advance your Product Market Fit KPI (Oct 21)
Finding the gaps in your product that will unlock the next round of growth.
Developer Relations as Developer Success (Oct 19)
Outreach, marketing, and developer evangelism are a part of Developer Relations. But the companies that are most successful with developers spend most of their time on something else.
Developer Experience Principle 6: Easy to Maintain (Oct 17)
Keeping your product Easy to Maintain will improve the lives of your team and your customers. It will help keep your docs up to date. Your SDKs and APIs will be released in sync. Your tooling and overall experience will shine.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2021 Adam Kalsey.