Menús horizontales
Menús horizontales con float
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):
ul {
}
li {
}
ul {
}
li {
}
ul {
list-style-type: none;
}
li {
background-color: #F6E3CA;
float: left;
}
Una vez conseguido un menú horizontal, se pueden aplicar diferentes estilos:
ul {
list-style-type: none;
}
li {
background-color: #F6E3CA;
float: left;
text-align: center;
width: 5em;
}
ul {
list-style-type: none;
}
li {
background-color: #F6E3CA;
float: left;
margin-right: 10px;
padding: 0 4px;
}
ul {
list-style-type: none;
}
li {
background-color: #F6E3CA;
border: #D7C8B6 2px solid;
float: left;
margin-right: 10px;
padding: 0 4px;
}
También se puede utilizar la pseudo-clase :hover para mejorar el resultado. Si la pseudo-clase :hover se aplica al enlace, la propiedad padding se debería aplicar al enlace para que el cambio de color se aplique a toda la opción del menú.
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;
}
Menús horizontales con display
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.
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;
}