Volver al índice Diseño de listas

Menús horizontales

Puedes crear menús horizontales a partir de listas utilizando la propiedad float, como muestra el ejemplo siguiente (basado en una explicación de Marek Prokop):

ul { }
li { }
  • Uno
  • Dos
  • Tres
  • Cuatro
ul { list-style-type: none; }
li { background-color: #F6E3CA; }
  • Uno
  • Dos
  • Tres
  • Cuatro
ul { list-style-type: none; }
li { float: left; background-color: #F6E3CA; }
  • Uno
  • Dos
  • Tres
  • Cuatro

Una vez tienes un menú horizontal, puedes elegir el estilo que más te guste:

ul { list-style-type: none; }
li { float: left; background-color: #F6E3CA;
width: 20%; text-align: center; }
  • Uno
  • Dos
  • Tres
  • Cuatro
ul { list-style-type: none; }
li { float: left; background-color: #F6E3CA;
margin-right: 0.6em; padding: 0 0.3em; }
  • Uno
  • Dos
  • Tres
  • Cuatro
ul { list-style-type: none; }
li { float: left; background-color: #F6E3CA;
border: #D7C8B6 2px solid;
margin-right: 0.6em; padding: 0 0.3em; }
  • Uno
  • Dos
  • Tres
  • Cuatro

Finalmente, puedes utilizar la pseudo-clase :hover para mejorar el resultado. Como Internet Explorer sólo admite esta propiedad sobre los enlaces, debes poner el padding en el enlace en vez de en el elemento de la lista para que el cambio de color afecte a toda la opción del menú.

ul { list-style-type: none; }
li { float: left; background-color: #F6E3CA;
margin-right: 0.6em; border: #D7C8B6 2px solid; }
a { color: black; text-decoration: none; padding: 0 0.3em; }
a:hover { background-color: white; color: #D7C8B6; }

Autor: Bartolomé Sintes Marco
Última modificación: 30 de noviembre de 2003