Creación de menus de navegación mediante listas y CSS

Añadido el 07/02/2007

Una de las formas mas sencillas de crear un menú utilizando css es mediante el uso de listas:

<ul>
	<li>Campo 1</li>
	<li>Campo 2</li>
	<li>Campo 3</li>
</ul>

En este caso nos saldrían los campos uno debajo de otro, y nuestro objetivo es que aparezcan horizontales, pero sobre todo, queremos controlar todo el aspecto del menu desde la hoja de estilos. Para ello añadiremos el siguiente codigo a nuestra hoja de estilos:

#menu {
display:block;
list-style:none;
margin:0;
margin-left:36px;
}

#menu li {
position:relative;
margin-left:2px;
margin-right:2px;
float:left;
background:url("img/menu-left.jpg") no-repeat bottom left;
}

#menu li a {
display:block;
width:185px;
padding:3px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#333333;
margin-left:3px;
background: url("img/menu-center.jpg") bottom;
border-right:1px solid #999999;
font-weight: bold; 
}

#menu li a:hover {
color:#FFFFFF;
background: url("img/menu-center-alt.jpg") bottom;
}

Y después creamos en nuestra página web el menu:

<ul id="menu">  
<li><a href="www.dominio.com">Campo 1</a></li>
<li><a href="www.dominio2.com">Campo 2</a></li>
</ul>

Si os fijais, hemos asigando a la lista el id="menu": <ul id="menu"> Por otro lado en la hoja de estilos hemos optado por usar imagenes de fondo en vez de colores. Es solo cuestión de imaginación. Un saludo y esperamos que os sirva.