Volver al índiceDiseño de listas

Menús horizontales

Se pueden 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):

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
}

li { 
}
  • Uno
  • Dos
  • Tres
  • Cuatro
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
}

li { 
  background-color: #F6E3CA; 
}
  • Uno
  • Dos
  • Tres
  • Cuatro
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
}

li { 
  background-color: #F6E3CA; 
  float: left; 
}
  • Uno
  • Dos
  • Tres
  • Cuatro

Una vez conseguido un menú horizontal, se pueden aplicar diferentes estilos:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
}

li { 
  background-color: #F6E3CA;
  float: left;
  text-align: center;  
  width: 5em; 
}
  • Uno
  • Dos
  • Tres
  • Cuatro
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
}

li { 
  background-color: #F6E3CA;
  float: left; 
  margin-right: 10px; 
  padding: 0 4px; 
}
  • Uno
  • Dos
  • Tres
  • Cuatro
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
}

li { 
  background-color: #F6E3CA;
  border: #D7C8B6 2px solid;
  float: left; 
  margin-right: 10px; 
  padding: 0 4px; 
}
  • Uno
  • Dos
  • Tres
  • Cuatro

También se puede utilizar la pseudo-clase :hover para mejorar el resultado. Como Internet Explorer 6 sólo admite esta propiedad sobre los enlaces, se suele 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ú.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
}

li { 
  float: left; 
  background-color: #F6E3CA;
  margin-right: 10px; 
  border: #D7C8B6 2px solid; 
}

a { 
  color: black; 
  padding: 0 4px; 
  text-decoration: none; 
}

a:hover { 
  background-color: white; 
  color: #D7C8B6; 
}

Otra forma de conseguir un menú horizontal es utilizar la propiedad display: inline en los elementos de la lista (<li>) en vez de la propiedad float. De esta manera se puede incluso centrar la lista, mediante la propiedad text-align: center en la lista (<ul> o <ol>). Otra ventaja es que no hace falta utilizar la propiedad clear.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome 
ul { 
  list-style-type: none; 
  text-align: center 
}

li { 
  background-color: #F6E3CA;
  border: #D7C8B6 2px solid; 
  display: inline; 
  margin-right: 10px; 
}

a { 
  color: black; 
  padding: 0 4px; 
  text-decoration: none; 
}

a:hover { 
  background-color: white; 
  color: #D7C8B6; 
}
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 21 de diciembre de 2011

Creative Commons License
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.