Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Two level CSS Tabs menu

Author: Dynamic Drive

Building on a regular CSS Tabs Menu, this CSS menu supports second level content that can be associated with specific tabs. By giving both a tab and the desired sub content a class of "selected", the sub content becomes visible on the page.

Demo:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (32)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 4 pages  1 2 3 >  Last »

Its great except for one thing -- there is no hover support. If I could have on thing for Christmas, it would be this script but with the ability to hover over the other options and see their submenus as well. If anyone knows how to do that, I would appreciate it!
Posted by Alexander DiCaprio on 06/07, 04:03 PM
Nice, I just don't like the colors...
Posted by Matt on 06/11, 12:07 PM
This homepage is rly nice
Posted by freak on 07/05, 09:52 AM
Nice looking menu. I'm sure I'll use it on one of my future sites.
Posted by Hrvoje on 07/22, 11:49 PM
Thanks very much. I will be using this menu on my next site. I love the fact you can change colours without the use of images. I am looking forward to the conditional code for when IE7 comes out.
Posted by Liz on 07/23, 05:49 AM
Dosn't go into very much detail just the code, this dosn't keep me on the page very long...
Posted by Justin on 08/12, 11:26 PM
the example does not work? how to get the second level menu shown while click/select the first level menu (show the home,new,revised submenu)? Please advised. Thanks
Posted by mill on 08/20, 03:17 AM
For Justin > the submenu that is shown is the one who will have the class "seleceted" in th ul.

You juste should make a onmouseover switch class to make it run right.
Posted by az on 09/03, 01:55 AM
i was told it could not be done. thank you.
Posted by lisa on 09/15, 12:37 PM
Awesome!!
Posted by harimurti on 11/24, 04:01 AM

Comment Pages 1 of 4 pages  1 2 3 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.