Adam Kalsey

This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.

User Experience

CSS tabs with Submenus

15 May 2003

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.

Recently Written

Your OKR Cascade is Breaking Your Strategy
Aug 1: Most companies cascade OKRs down their org chart thinking it creates alignment. Instead, it fragments strategy and marginalizes supporting teams. Here's what works better than the waterfall approach.
Your Prioritization Problem Is a Strategy Problem
Jul 23: Most teams struggle with prioritization because they're trying to optimize for everything at once. The real problem isn't having too many options—it's not having a clear strategy to choose between them. Without strategy, every decision feels equally important. With strategy, most decisions become obvious.
Behind schedule
Jul 21: Your team is 6 weeks late and still missing features. The solution isn't working harder—it's accepting that your deadlines were fake all along. Ship what you have. Cut ruthlessly. Stop letting "one more day" turn into one more month.
VC’s Future Lies In Building Winners
Jun 21: AI and megafunds are about to kill the traditional venture model, forcing smaller VCs to stop hunting for hidden gems and start rolling up their sleeves to fix broken companies instead.
Should individual people have OKRs?
May 14: A good OKR describes and measures an outcome, but it can be challenging to create an outcome-focused OKR for an individual.
10 OKR traps and how to avoid them
May 8: I’ve helped lots of teams implement OKRs or fix a broken OKR process. Here are the 10 most common problems I see, and what to do instead.
AI is Smart, But Wisdom Requires Judgement
May 3: AI can process data at lightning speed, but wisdom comes from human judgment—picking the best imperfect option when facts alone don’t point the way.
Decoding Product Leadership Titles
Mar 18: Not all product leadership titles mean what they sound like. ‘Head of Product’ can mean anything from a senior PM to a true VP. Here’s how to tell the difference.

Older...

What I'm Reading