Boite à onglets plus complexe

code issu de http://www.dynamicdrive.com/style/csslibrary/item/css-tabs-menu

by toubia95

HTML

<ul class="basictab">
<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>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>

CSS

html {
    padding: 50px;
}

ul{
padding: 3px 6px;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

ul li{
display: inline;
margin: 0;
}

ul li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
    border-radius: 5px 5px 0 0; /* css3 enhancements */
border-bottom: none;
background-color: #ddd;
color: #222;
}

ul li a:visited{
color: #222;
}

ul li a:hover{
background-color: #999;
color: #fff;
}

ul li a:active{
color: black;
}

ul li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #fff;
color: black;
}