menu css

Crear menús de navegación en CSS usando listas
¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la transición hacia el uso de XHTML estándar y el maquetado con CSS.
Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguajediseñado para estructurar datos, y eso es lo que debemos hacer con el. En ese sentido, las listas nos ofrecen una muy buena forma de estructurar, pues...listas.
En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la unica diferencia es que las ordenadas añaden un número correlativo a cada item de la lista, mientras que las desordenadas no:
Las Listas Ordenadas:

Nos da comoresultado:
itemitemitemMientras que, las listas desordenadas:

Nos queda:
itemitemitemAhora la gran pregunta, Por qué &%$#$@/ tengo que usar eso para hacer mi menú?Sencillo, porque un menú básicamente ES una lista, no es un parrafo, ni un titulo, es una lista de vínculos. Y como lista que és, lo mas correcto es que esté estructurada en el HTML como tal.
Pero no hay de que preocuparse, yaque el CSS nos permite cambiar completamente el aspecto de la lista, para convertirla en el bonito menú que queremos, sin que deje de ser lista. Pero primero, veamos en qué consisten los pre-formatos que trae de por sí una lista.
Las listas se renderizan en el navegador con ciertas características, como el margen / relleno (interpretado de diferente manera en los distintos navegadores) de la listacompleta, el margen / relleno (idem) de cada item de la lista y las viñetas, ademas de un salto de línea para cada item por ser elementos de bloque.

Todos estos formatos pueden ser eliminados / modificados a través de CSS muy fácilmente. Comencemos con las viñetas.
Nota: para los ejemplos usaremos una lista desordenada, ya que no necesitamos la numeración.
Las viñetas por defecto de laslistas desordenas es un circulo relleno, podemos cambiarlo por un cuadrado, un circulo vacio, o una imagen, cambiando tan solo un atributo en nuestro CSS para la lista:
<ul id="navi"> <li>inicio</li><li>acerca de</li><li>contactos</li></ul><!--agregamos un ID para referirnos directamente a esta lista.-->
En el CSS:
#navi{list-style-type:square;}//O bien...#navi {list-style-type:circle;}//O mas bien...#navi {list-style-image:url(images/vineta.png);}
Nos da como resultado:

También podemos poner:
#navi { list-style:none;}
Con lo que le quitamos las viñetas:

Ahora vamos con los márgenes y el relleno. Dado que los distintos navegadores pueden interpretar el margen y el relleno de diferente forma, hay que especificar ambos valorescon los que queramos darle a nuestra lista, aunque parezca que el que trae la lista de por sí, sea el adecuado para lo que queremos, es mejor especificarlo en el CSS.
#navi { list-style:none;margin:0;padding:0;}//luego a los elementos de la lista...#navi li {margin:2px;padding:2px;border:1px solid#CCCCCC;}

Para continuar, vamos a agregarle vinculos a los elementos de la lista:
<ul><li><a href="#">inicio</a></li> <li><a href="#">acerca de</a></li> <li><a href="#">contactos</a></li></ul>
Ahora tendremos:

Ahora es tiempo de decidir si queremos nuestro menu horizontal, o vertical. Si es vertical, no necesitamos agregar nada especial al código, pero si es horizontal, hay que agregar un float parahacer que los elementos de la lista se coloquen uno al lado del otro:
#navi { list-style:none;margin:0;padding:0;}#navi li {margin:2px;padding:2px;border:1px solid #CCCCCC;float:left; //para eliminar el comportamiento de elemento de bloque(salto de linea)}
Y el resultado:

Nota: al aplicar el float, los elementos de la lista se reduciran al minimo tamaño necesario para el texto que contengan....