Lo primero que vamos a hacer va a ser crear nuestro menú con una lista no ordenada:

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Sobre el Autor</a></li>
</ul>

Ahora vamos a aplicar los estilos. Para ello vamos a eliminar la viñeta por defecto (list-style: none) y vamos a hacer que los elementos floten a la izquierda, para que salga en horizontal. También le vamos a dar un borde para decorar y vamos a cambiar el color de fondo de los enlaces al pasar sobre ellos. Veamos el código CSS:

ul#menu {
  list-style: none;
  float: left;
  width: 900px;
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
ul#menu li {
  float: left;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ddd;
}
ul#menu li a {
  float: left;
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
ul#menu li a:hover {
  background: #333;
  color: #f0f0f0;
}

De esta forma obtenemos un menú como el de la imagen:

Con unas pocas modificaciones podemos hacer que tenga el aspecto de pestañas:

ul#menu {
list-style: none;
float: left;
width: 900px;
margin: 0;
padding: 0;
border-bottom: 1px solid #ddd;
}
ul#menu li {
float: left;
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
ul#menu li a {
float: left;
display: block;
padding: 10px;
color: #333;
background: #f0f0f0;
text-decoration: none;
}
ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}

Y nos quedaría como la siguiente imagen:

Con esto finaliza esta parte sobre las listas y CSS. En la próxima entrega volveremos con las listas, para ver como podemos crear unas listas con más estilo.