Utilizando estilos CSS podemos remover la imagen que indica la lista y podemos ubicar de manera horizontal cada elemento de la lista, para asi tener como resultado un menu. Los estilos que usaremos son:

• float – permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos. En el caso de la lista ubicara cada inciso de la lista a la derecha del anterior.
• padding - permite agregar un relleno a cada elemento de manera que no queden encimados los elementos.
• list-style-type - esta propiedad nos permite cambiar la imagen de la lista o en este caso para el menu, removerla.

Utilizaremos estilos compuestos, los cuales sirven para establecer estilos especificos. Por ejemplo: si contamos con una etiqueta div de clase “estilo1″ y dentro de esta etiqueta tenemos un enlace (o etiqueta a), entonces la regla de CSS seria estilo1 a es muy importante el espacio entre cada clase y etiqueta. Los estilos compuestos no tienen limite, pueden in de un simple estilo compuesto de una clase y una etiqueta, hasta tener un estilo asi (#container .estilo1 table .estilo3 li). El cual nos hablaria de un elemento de tipo lista dentro de una tabla con una clase llamada estilo 3 dentro de una division con una id container y una clase estilo1. Por revuelto que esto pueda sonar es importante que sea comprendido este concepto para continuar con el menu horizontal.

Para las personas que utilizan Dreamweaver, al momento de crear un estilo compuesto Dreamweaver nos da una muy sencilla explicación del estilo que estamos creando, lo cual los ayudara a no perderse en el proceso.

Para efecto de este tutorial, crearemos una división con un id menu y crearemos una lista dentro de esta division.

El propósito sera crear un estilo para las listas de la etiqueta menu, que de la propieda de flotar hacia la izquierda, de manera que se ubiquen una despues de la otra de manera horizontal.