Menu horizontal con HTML y CSS

Menú horizontal HTML CSS

Veamos como crear un menu horizontal utilizando unícamente HTML y CSS.
Puedes ver también la entrada anterior donde hemos visto como crear un menú vertical con HTML y CSS.

Paso 1: Crear la lista con las opciones del menú

Lo cual de momento se ve así:

Notemos que la lista tiene ya los enlaces, pero estos apuntan dentro de la misma página a ningún lugar utilizando el símbolo numeral (#).

Paso 2: Dar formato a la lista

2.1: Tamaño y posición

Aplicar las propiedades float y clear para cargar el menú hacia el lado requerido. Poner el ancho del menú al total de la página.

2.2: Quitar viñetas y márgenes

Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto:

2.3: Acomodar los elementos en horizontal

La clave para el menú horizontal reside en modificar la propiedad float de los elementos <li> del menú

2.4: Estilos a los elementos

Aplicar estilos a los enlaces

About Michelle Torres

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.