El resultado fue el siguiente:
 |
| El menú horizontal funcionando. |
Asi que manos a la obra. Lo primero es hacer una lista desordenada con html, las cuales tendran las opciones de los menus y submenus.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Fiko" />
<title>Probando menu horizontal CSS</title>
<link href="menu.css" type="text/css" rel="stylesheet" />
</head>
<body>
<nav>
<ul id="menu">
<li><a href="">Opción 1</a>
<ul>
<li><a href="">Opción A</a></li>
<li><a href="">Opción B</a></li>
<li class="ultimo"><a href="">Opción C</a></li>
</ul>
</li>
<li><a href="">Opción 2</a>
<ul>
<li class="ultimo"><a href="">Opción D</a></li>
</ul>
</li>
<li><a href="">Opción 3</a></li>
<li><a href="">Opción 4</a></li>
</ul>
</nav>
</body>
</html>
Con este código, nos queda algo asi:
 |
| El menú sin estilos CSS. |
Lo que nos queda es una lista con viñetas, y dentro de un item de la lista hay otra sublista. Lo que falta es configurarlo para que sólo las opciones de la lista principal sean visibles y se vean alineados horizontalmente. También que al pasar el cursor sobre una opción principal, aparescan las secundarias. Esto se hace con código CSS:
/* El color de fondo es solo para hacer más visible el menu */
body{
background-color:black;
}
/* La etiqueta nav está disponible desde html5 y permite identificar
las partes de un menu principal. Les doy una medida de ancho y margin:0 auto;
para que aparesca centrada la lista con el menu
*/
nav{
width:1000px;
height:60px;
background-color:blue;
margin:0 auto;
}
/* Es el ul principal, configurado para que no muestre viñetas y con las configuraciones para
alinear al centro */
#menu{
list-style:none;
list-style-position:inside;
width:800px;
margin:0 auto;
display:block;
text-align:center;
}
/* Es cada opción principal del menu, los ordena horizontalmente con la propiedad float.
Al tener un ancho fijo, se alinea su contenido al centro y con position:relative; permite
que al pasar el cursor, aparescan las opciones bajo cada opción principal
*/
#menu li{
float:left;
padding:20px;
width:150px;
position:relative;
}
/* Es el submenu. Con display none permanece escondido y con position absolute le dice que aparesca
bajo la opción padre. Con top y right se dice a que altura de la opción debe aparecer.
Finalmente, con z-index:1; le dice que sobreponga a cualquier otro elemento el submenu.
*/
#menu li ul{
list-style:none;
list-style-position:inside;
display:none;
position:absolute;
top:60px;
left:-41px;
z-index:1;
}
/* Es la ultima opción del submenu. con border-radius se da los bordes redondeados al final */
#menu .ultimo{
border-radius:0 0 10px 10px;
border:1px white solid;
border-top:none;
}
/* Son las opciones del submenu. */
#menu li ul li{
background-color:lime;
padding:10px;
width:170px;
border-bottom:1px white dashed;
border-left:1px white solid;
border-right:1px white solid;
}
/* Configuración al pasar el mouse ensima de una opción principal */
#menu li:hover{
background-color:lime;
border-left:1px white solid;
border-right:1px white solid;
}
/* Hace visible el ul del submenu al pasar el mouse ensima de una opción principal */
#menu li:hover > ul{
display:block;
}
/* Configuración de como se veran los enlaces */
#menu a, #menu a:visited{
color:white;
text-decoration:none;
font-family:sans-serif;
font-weight:bold;
outline:none;
}
#menu a:hover{
text-decoration:underline;
}
Ahora se tiene un menu simple y configurado solo con CSS y HTML5, de manera que es ligero y de facil configuración para adaptar a cualquier proyecto.
Links:
