Need someone to lead product management at your software company? I build high-craft software and the teams that build it. I'm looking for my next opportunity. Check out my resume and get in touch.

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

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.
What branding can teach about culture
Jan 8: Culture is your company’s point of view in action—a framework guiding behavior, even in the unknown. You can’t copy it; it must reflect your unique perspective.
Think Systems, not Symptoms
Dec 15: Piecemeal process creation frustrates teams and slows work. Stop patching problems and start solving systems. Adopting a systems thinking approach helps you design processes that are efficient, aligned with goals, and truly add value.
Your Policies Aren’t Your Culture
Dec 13: Policies guide behavior, but culture is the lived norms and values of your team. Policies reflect culture -- they don’t define it. Netflix’s parental leave shift didn’t change its culture of freedom and responsibility. It clarified how to live it.
Lighten Your Process Burden
Dec 7: Everyone hates oppressive processes, but somehow we keep managing to create them.

Older...

What I'm Reading