Desactivamos márgenes y padding para todos los elementos de la página:
* {
margin:0;
padding:0;
}
Definimos el color de fondo de la página:
body {
min-width: 680px;
background: #999;
padding:10px;
}
Definimos el color de fondo de la cabecera:
#cabecera {
background: #eee;
}
Definimos el alto del título:
#titulo {
height:70px;
}
Ahora comienza lo relativo al menú:
Definimos que la lista no tendrá los círculos de referencia, su color de fondo, ancho y hacia donde
debe flotar:
ul#barrahorizontal {
list-style-type: none;
background: #036;
float: left;
width: 100%;
}
Indicamos que cada elemento de la lista se muestre en la misma línea:
ul#barrahorizontal li {
display: inline;
}
Definimos las propiedades para los enlaces, indicando que se muestren en block para que toda la región
que ocupa sea posible hacer clic, con el valor 'none' en text-decoration hacemos que no se vea el subrayado
sobre el enlace, definimos un borde a derecha de color blanco sólido para separar las opciones:
ul#barrahorizontal a {
display: block;
float: left;
padding: 4px 18px;
text-decoration: none;
color: #fff;
background: #036;
border-right: 1px solid #fff;
}
Por último cuando pasamos la flecha del mouse sobre la opción indicamos otro color de texto y fondo:
ul#barrahorizontal a:hover {
color: #000;
background: #69C;
}