Tabbed navigation menu

Some methods to make tabbed looking navigation on page

CSS code that is used below


body
{
margin:0;
color: #000;
background: #CBE7C1;
padding-left:0.3em;
}

code {white-space:pre;display:block;width:100%;}

/* valikko */
.tabs {	
display: block;
position: absolute;
top:0.4em;
left:0.3em;
margin:0;
margin-top:3px;
/* margin-left:2px;*/
padding:0;
padding-left:1ex;
border:0;
}

.tabs li 
{	
padding-top:0;
display:inline;
color:#000;
background:#84C06C;
margin:0;
padding:0;
}

/* next is for Mozilla bug? or something.*/
.tabs li:first-child  {	margin-left:2px;}

.tabs li a
{
background:#84C06C;
font-weight: bold;
text-decoration: none;
font-family:Helvetica, Arial, Swiss, sans-serif;
padding:0 1ex;
line-height:1.6em;
margin:0;
border:2px solid #000;
margin-left:-1ex;
}

.tabs li a:hover
{
color:#afa;
}

li  a.this	
{
background:#CBE7C1;
border-bottom:0;
border-top:2px solid #000;
padding-top:2px;padding-bottom:2px;
color:#000;
z-index:10;
}
li > a.this 
/* IE shows strange things so let's hide this*/
{	
position:relative;	
}
li a.this:hover	
{
color:#000;background:#CBE7C1;;
}

h1	
{	
margin:0;
margin-top:1.25em;
padding:2em 10px 0.2em;
font-size:160%;
border:2px solid #000000;
border-bottom:0;
}

body > p, pre 
{
border-left:2px solid #000;
border-right:2px solid #000;
margin:0;
padding:0.8em 0.2em;
font-family:sans-serif;
}

address	
{
font-style:normal;
}


You can check CSS with W3C CSS-"validator"