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 2 of 4 pages  <  1 2 3 4 >

Please help, I simply cannot get this to work, but would really like to....
Posted by Bill Pugh on 12/05, 03:43 PM
Really good.
anyone s got an idea about how to solve proper visualisation in IE7 ?
Cheers
Posted by David on 12/06, 12:46 PM
Good but how do you get the sub nav to change when you click on a main tab?
Posted by Dragon on 12/07, 11:58 AM
Can anyone tell me how to make the submenus to change properly according to the selected item in the main menu?

thx
Posted by gigi on 12/20, 06:23 PM
Yes, I agree...I would like if you were to put up one where the hover brings up the bottom part of the nav bar. good otherwise
Posted by Rooster on 01/02, 01:42 PM
Sorry, but this does not work. the sub menu never changes. I tried in different browsers and your code just doesn't do it.
Posted by wolffy on 04/18, 11:48 AM
Hi Guys,

Thats a really nice rollover menu. I tried playing around with the onmouseover switch class but can't get it to work so that when you hover over the other options it displays their full menu and also when you click on one of the other main headings i.e. forums it displays the options with this heading and not just default back to the selected "css" link view.

Any ideas?

Any help appreciated
Posted by Phil on 05/11, 10:44 AM
Hi Great Source!
How I could implement to show up submenu items while we hover on one of the main menu?
Thanks
Posted by jomlo on 06/09, 03:25 AM
Found this css-driven, 2-tier, horizontal-tabbed, hover-over-to-reveal-the-submenu example from A List Apart:

Article:
http://alistapart.com/articles/hybrid

Example:
http://alistapart.com/d/hybrid/hybrid-4.html

I can't comment on usage, but it looks like it works.
Posted by Steve on 07/03, 04:40 PM
Like the menu alot - very versatile tho I'm struggling to put a defined px width on each top level <li>. It seems to just run from the left of the page. Can anyone help?

thanks

A
Posted by adam on 07/19, 08:08 AM

Comment Pages 2 of 4 pages  <  1 2 3 4 >


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