ul horizontal tab menus, cross browser, with no hacks

There are too many times when I need a nice horizontal tab menu, using semantic html, and with cool graphics all at the same time. So this post is more for my personal reference and will shave a few hours off any ones html prototype. This is cross browser valid css 2.1 on IE6, IE7, FF3, Chrome and Safari without using any hacks.

The end result:

To start with, here is the css:

 
/*----------------------Navigation*/ 

div.nav-container ul.primary-nav { 
 margin: 45px 0 0 236px; 
 white-space: nowrap; 
 display: inline; 
 float: left; 
} 
div.nav-container ul.primary-nav li { 
/*setup the container for tab divs*/ 
 list-style: none; 
 height: 28px; 
 display: inline; 
 font-size: 1.2em; 
 margin: 0; 
 position: relative; 
} 
div.nav-container ul.primary-nav li div { 
/*float all divs containing tab images left*/ 
 float: left; 
} 
div.nav-container ul.primary-nav a {
 color: #777; 
 text-decoration: none; 
 font-weight: 700; 
} 
div.nav-container ul.primary-nav li.selected div.tab-main a { 
 color: #fff; 
} 
div.nav-container ul.primary-nav li div.tab { 
 height: 28px; 
 /*-5 on margin will give us the overlap look*/ 
 margin: 0 -5px 0 0; 
} 
div.nav-container ul.primary-nav li div.tab div.tab-main, 
div.nav-container ul.primary-nav li.selected div.tab div.tab-main { 
 float: left; 
 padding: 5px 15px 0 10px; 
 text-align: center; 
 margin: 0 auto 0 auto; 
} 
div.nav-container ul.primary-nav li div.tab div.last, 
div.nav-container ul.primary-nav li.selected div.tab-last div.last { 
 float: left; 
 padding: 5px 10px 0 10px; 
 text-align: center; 
 margin: 0 auto 0 auto; 
} 
div.nav-container ul.primary-nav li.inactive div.tab div.tab-main { 
 background: url(../images/nav/nav-bg-center-inactive.gif) repeat-x left top; 
 height: 28px; 
} 
div.nav-container ul.primary-nav li.inactive div.tab div.tab-left { 
 width: 2px; 
 background: url(../images/nav/nav-bg-left-inactive.gif) no-repeat left top; 
 height: 28px; 
} 
div.nav-container ul.primary-nav li.inactive div.tab div.tab-right { 
 width: 2px; 
 background: url(../images/nav/nav-bg-right-inactive.gif) no-repeat right top; 
 height: 28px; 
} 
div.nav-container ul.primary-nav li.selected div.tab div.tab-main { 
 background: url(../images/nav/nav-bg-center-active.gif) repeat-x left top; 
 height: 28px; 
} 
div.nav-container ul.primary-nav li.selected div.tab div.tab-left { 
 background: transparent url(../images/nav/nav-bg-left-active.gif) no-repeat left top; 
 width: 4px; 
 height: 28px; 
} 
div.nav-container ul.primary-nav li.selected div.tab div.tab-right { 
 background-image: url(../images/nav/nav-bg-right-active.gif); 
 width: 4px; 
 height: 28px; 
} 

And finally the html:

 
 <div class="nav-container"> 
 <ul class="primary-nav "> 
 <li class="selected"> 
 <div class="tab"> 
 <div class="tab-left"></div> 
 <div class="tab-main"><a href="#">Home</a></div> 
 <div class="tab-right"></div> 
 </div> 
 </li> 
 <li class="inactive"> 
 <div class="tab"> 
 <div class="tab-left"></div> 
 <div class="tab-main"><a href="#">Profile</a></div> 
 <div class="tab-right"></div> 
 </div> 
 </li> 
 <li class="inactive"> 
 <div class="tab"> 
 <div class="tab-left"></div> 
 <div class="tab-main"><a href="#">About Us</a></div> 
 <div class="tab-right"></div> 
 </div> 
 </li> 
 <li class="inactive"> 
 <div class="tab"> 
 <div class="tab-left"></div> 
 <div class="tab-main last"><a href="#">Help</a></div> 
 <div class="tab-right"></div> 
 </div> 
 </li> 
 </ul> 
 </div> 
 </div>