Menú desplegable con css (básica)

Css

En este post te enseñare paso a paso como hacer un menú desplegable con css, te mostrare la estructura html que utilizare y el código css.

Si no tienes conocimiento de css, te invito a ver los anteriores post donde te explico para que sirven varios códigos.

Estructura Html de Menú desplegable con css:

Menú desplegable

Esta es la estructura que yo utilizare pero ustedes pueden agregarle mas submenu tanto como ustedes deseen o necesiten lo siguiente que haremos sera darle estilo a nuestro menú desplegable con css.

Estilo a Menú desplegable con css:

Menú desplegable

Lo que estamos haciendo es quitarle el margin  y el padding que tienen por defecto las paginas, le quitamos la viñetas y la forma de enlace que trae nuestras.

La parte visual debe verse de esta manera hasta el momento.

Menú desplegable

Ahora haremos que los Submenu se oculten y que nuestro menu tenga un hover  para cada vez que pase el mouse haga su efecto.

menú desplegable

Con este código podemos dar por terminado nuestro menú y pueden ver el efecto que le da el Hover  al pasar el mouse sobre el menú, se debe ver de esta forma.

menú desplegable

En un siguiente les mostrare paso a paso como hacer un menú vertical estilo acorde.