navigation menu tabs pure css

Question

I'm looking for a good css technique to use nav tabs that look exactly like this:

I have a div with a logo that has a background and I want the tabs to overlap exactly like in the pic.

I don't want to use drupal's entire html and css structure as I need it to be lightweight. Does anyone know how to do that?

Answer 1

I'll point you to this website: http://pea.rs/ for some good CSS design patterns.

And more spefically this page: http://pea.rs//navigation/horizontal-tabs

There's a pretty good modern browser version of what you're looking for, sans filling in your background and logo.

Of course, border-radius isn't supported in IE8 and below, so you'll either have to be ok with that or use one of the many round-corner techniques.

Hope that helps!