JavaScript/CSS Tab Menu with Sub-Navigation

Step 4 The CSS

Finally, we need to create our CSS to style the menu. You'll probably want to play with dimensions and what have you when creating your own nav bar, so that it matches the width of your layout. For now, though, I'm creating a tab menu that's 600px wide. The height of the menu bar is 54px (25px for our sub-nav + 29px for our tabs).

#nav {	width:600px;	height:54px;	margin:0;	padding:0;}

Next, we'll style all of the text within our nav/sub-nav: This is purely cosmetic. It centers all of the text, makes it white, sets the font, and gets rid of the link underlines.

#nav * {	text-align:center;	color:#fff;	font-weight:bold;	text-decoration:none;	font-family:arial, helvetica, sans-serif;	font-size:9pt;}

Next, we'll get rid of all of the margins, padding and bullets from all of our lsits.

#nav ul, #nav ul li {	margin:0;	padding:0;	list-tyle-type:none;}#nav ul li { display:inline; }

Float our main menu tabs to the right side of the nav bar:

ul#tabBar { float:right; }

Now we'll style our main nav tabs, including their standard and hover states: Note that by changing the line-height on the hover state, we make the tab "pop up."

ul#tabBar li a {	display:block;	float:left;	width:90px;	height:29px;	line-height:39px;	background:url(../imgs/tab_bg.jpg) 0 10px no-repeat;	border-left:4px solid #fff;	overflow:hidden; /* fixes IE display bug */}ul#tabBar li a:hover {	line-height:29px;	background:url(../imgs/tab_bg.jpg) top left no-repeat;}

Now we set the styles for our sub-nav lists: We want to hide the sub-nav lists by default, make sure they clear they get positioned below the main tabs, and we want to float them to the left of our menu bar and set the background. Tor the sub-nav container itself we use the 'nav_bg.jpg' file and then for the sub-nav list, we set the background to the 'subnav_separator.jpg' file, and make sure it's positioned to the left and doesn't repeat.

#subNav ul { display:none; }#subNav {	clear:both;	height:25px;	background:url(../imgs/subnav_bg.jpg) top left repeat-x;	padding-left:100px;}#subNav ul {	float:left;	background:url(../imgs/subnav_separator.jpg) top left no-repeat;}

Finally, we style the links: This is very straightforward. We're just setting the link dimensions, floating each link to the left, setting the text alignment and the background. Notice how we set the 'nav_separator.jpg' as the background and position it on the right edge of the link.

	display:block;	float:left;	width:90px;	text-align:center;	line-height:25px;	background:url(../imgs/subnav_separator.jpg) top right no-repeat;}#subNav li a:hover { color:#cde7ff; }

That finishes up the menu! I've attached the full source for you to play with.