Menú Desplegable
Una forma fácil de hacer un menú desplegable sería utilizar Flash, pero, al momento encontrariamos varios inconvenientes: el tamaño del archivo, la compatibilidad del software utilizado para reproducirlo, la adaptabilidad al resto del diseño (sobre todo si trabaja con html desde un editor de código), entre otros.
Para crear un menú deplegable con CSS y HTML necesitará el siguiente código:
Este primer bloque resetea el padding y el margin a 0px.
* {
padding:0px;
margin:0px;
}
padding:0px;
margin:0px;
}
Se configura la capa principal que en este caso se llamará capamenu.
#capamenu {
margin:auto;
width:800px;
font-family:arial;
}
margin:auto;
width:800px;
font-family:arial;
}
Se configuran las etiquetas de html UL y OL para que no tengan estilo.
ul, ol {
list-style:none;
}
Se crea y configura la capa navegar que contendra cada una de las opciones, y a su vez se configura las etiquetas li para las opciones y a para los hipervinculos.
.navegar li a {
background-color:#069;
color:#FFFFFF;
text-decoration:none;
padding: 10px 15px;
display:block;
}
Se configura el estado sobre de los hipervinculos (cuando posicione el mouse sobre la opción el color del fondo cambiará).
.navegar li a:hover {
background-color:#FF3300;
}
Se configuran las listas que estén inmediatamente después de la capa navegar para que tengan la propiedad de flotar a la izquierda una de la otra.
.navegar > li {
float:left;
}
Se configuran las etiquetas ul que seguirán a las etiquetas li, esto es las primeras opciones deplegables que tendremos.
.navegar li ul {
display:none;
position:absolute;
min-width:140px;
}
Para que aparezcan las opciones desplegables configuraremos el estado sobre, pero, en esta ocación se modificará el estado sobre de la etiqueta li.
.navegar li:hover > ul {
display:block;
}
Se configura la posición de las opciones desplegables, en este caso será relativa.
.navegar li ul li {
position:relative;
}
Por último se configura la posición exacta en la que aparecerán las opciones desplegables de tercer nivel, esto mostrará cada opción de tercer nivel al lado derecho de la opción de segundo nivel.
.navegar li ul li ul {
right:-140px;
top:0px;
}
La segunda parte corresponde a HTML y es esta:
Antes de comenzar es importante aclarar que se debe trabajar entre las etiquetas <body> y </body>
Iniciamos la capamenu con este código.
<div id="capamenu">
Iniciamos la clase navegar dentro de la etiqueta ul que proporcionará las listas.
<ul class="navegar">
Aquí iniciamos con las opciones principales del menú
<li><a href="#">Inicio</a></li>
<li><a href="#">Videos</a>
Aquí iniciamos con las opciones de segundo nivel o sea las subopciones de Videos.
<ul>
<li><a href="#">Video 1</a></li>
<li><a href="#">Video 2</a></li>
<li><a href="#">Otros Videos</a>
Aquí iniciamos con las opciones de tercer nivel o sea las subopciones de Otros Videos
<ul>
<li><a href="#">Video 1</a></li>
<li><a href="#">Video 2</a></li>
<li><a href="#">Video 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Carreras</a>
<ul>
<li><a href="#">BASICO</a></li>
<li><a href="#">PERITO CONTADOR</a></li>
<li><a href="#">PERITO EN ADMINISTRACION</a></li>
</ul>
</li>
<li><a href="#">Preguntas</a></li>
</ul>
</div>
Para obtener los mejores resultados debe respetar el orden de tabulación para saber que opciones esta configurando dentro de su menú desplegable.
A continuación del dejo el código sin comentarios, primero el código CSS.
Ahora el código html:
