Creación de Pestañas con Listas y CSS

Alguna vez hemos pasado por una página de internet que tiene esos links que se ven bonitos que parecen pestañas de archivos, en los inicios de los tiempos (sonó interesante no?) esas "pestañas" se lograban con tablas, ingenio y unas cuantas imágenes, pero si quieren una manera sencilla de hacerlo sigan leyendo.

Primero se empieza con una lista normal y corriente de HTML:

<ul id="tabs">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
</ul>

Con este pedazo de código no logramos nada interesante ni fuera de lo normal, simplemente creamos la siguiente lista:

• Link 1
  
• Link 2
  
• Link 3
  
• Link 4

Ahora le agregamos las siguientes reglas de CSS:

ul#tabs{
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid black;
text-align: center;
padding-bottom: 1.4em;
}

ul#tabs li{
display: inline;
margin: 0 5px;
float: left;
}

ul#tabs a{
display: block;
float: left;
width: 100px;
background: #ccc;
border: 1px solid black;
border-bottom: none;
text-decoration: none;
color: black;
}

ul#tabs a:hover{
background: white;
border-bottom: 1px solid white;
}

Y el resultado es este: