Lo primero que necesitamos hacer es crear dos archivos uno será nuestro html que contendrá el menú en si con subitems, ya veremos como, y el otro archivo que necesitamos será el css que será el mas importante ya que en este aplicaremos todo el diseño de nuestro menú y es donde aplicaremos el comportamiento desplegable.
Bien mano a la obra:
- Abrimos el archivo html y si usamos SublimeText ya sabemos que con solo escribir html y la tecla Tab se auto completa con todas las etiquetas necesarias inicialmente.
- Una vez hecho esto en el body colocamos la siguiente estructura:Bien expliquemos un poco: en la linea 7 se utiliza la etiqueta <ul> la cual es una lista que luego le daremos la forma de menú, luego cada ítem de nuestro menú se agrega a través de las etiquetas <li>, después en la linea 10 se inserta otra lista que será la que contendrá los subítems. Cada ítem tendrá un link al sitio o pagina que nosotros indiquemos en el href="" de cada etiqueta <a>. Entonces para sintetizar cada ítem será un enlace, y si ese ítem tiene subítems, estos estarán en una lista que se desplegará, por lo tanto nuestro menú será una lista superior que contendrá a los items generales.
- Bien en el head agregamos el link a nuestro archivo css y guardamos los cambios. Ahora abrimos el css y comencemos por darle estilo a los elementos del tipo "ul"(menú y submenús) y "li" (ítems):
- Luego le damos estilo a los links del menu:
- Bueno hasta aquí todo lo que respecta al menú general, ahora le diremos que estilo tendrán los submenús:
- Ahora solo falta lo mas importante, hacer que nuestro menú tenga el efecto de despliegue:
Expliquemos: utilizando ":hover" hicimos que cuando el mouse se posicione sobre el elemento éste tome las propiedades que están dentro del bloque, en este caso "display: block;" mostrando los ítems de los submenús uno bajo el otro. - Ahora guardamos los cambios y si ven su menú en el navegador ya debe funcionar.
- Por último le damos un poco de sensibilidad: