Dynamic Drive CSS Library- Two level CSS Tabs menu

CSS Library

CSS Layouts

Web Graphics

Free 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:

<style type="text/css">

#maintab{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
}

#maintab li{
display: inline;
margin: 0;
}

#maintab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: black;
background: white;
}

#maintab li a:hover{
color: navy;
background: #EFFADC;
}

#maintab li.selected a{ /*selected main tab style */
background-color: #EFFADC;
border-color: navy;
}

#tabcontent{ /*2nd level content wrapper*/
border: 1px solid #778;
background-color: #EFFADC;
height: 100% /*IE7 beta2 fix*/
}

#tabcontent ul{
padding: 0;
margin: 0;
list-style-type: none;
display: none;
}

#tabcontent ul li{
display: inline;
}

#tabcontent ul.selected{ /*selected 2nd level content*/
display: block;
}

#tabcontent ul li a{
border-right: 1px solid #778;
color: navy;
padding: 2px 5px;
display: block;
float: left;
text-decoration: none;
}


#tabcontent ul li a:hover{
background-color: #D3F1A0;
color: blue;
}

.clearfix:after{ /*Clear floats hack: http://positioniseverything.net/easyclearing.html*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix{
display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


</style>

The HTML:

<ul id="maintab">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>

<div id="tabcontent" class="clearfix">

<!--Sub Content #1 -->
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
</ul>

<!--Sub Content #2 -->
<ul class="selected">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
</ul>

</div>

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.