Menú desplegable con HTML5 y CSS3

Menu desplegable

En primer lugar tendremos que crear la estructura HTML de nuestro menú. Vamos a utilizar HTML5 para albergar el menú de navegación en una etiqueta

, a continuación, añadimos los enlaces de navegación primaria en una lista.

 


  
 href="#">Home

  
 href="#">Tutoriales

  
 href="#">Artículos

  
 href="#">Inspiración

 

Vamos a crear los submenús en las seccines “Tutoriales” y “Artículos”, cada uno de ellos una lista desordenada completa insertada dentro de la etiqueta

de su opción de menú principal.

 


  
 href="#">Home

  
 href="#">Tutoriales

   


    
 href="#">Photoshop

    
 href="#">Illustrator

    
 href="#">Diseño web

     


      
 href="#">HTML

      
 href="#">CSS

     

href="#">Artículos

href="#">Diseño web

href="#">Experiencia de usuario

href="#">Inspiración

Vamos a comenzar a construir el CSS para conseguirla funcionalidad desplegable. Primero ocultaremos los submenús con el display: none; Con el fin de hacer que estos menús reaparezcan que necesitan ser convertidos de nuevo en un elemento “block”. Veamos como nos queda la estructura CSS.

nav ul ul {
 display: none;
}
 
 nav ul li:hover > ul {
  display: block;
 }

A continuación daremos algo de estilo al menú y lo situaremos en una sola lína horizontal.

 
nav ul {
 background: #efefef; 
 background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
 background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
 box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
 padding: 0 20px;
 border-radius: 10px;  
 list-style: none;
 position: relative;
 display: inline-table;
}
 nav ul:after {
  content: ""; clear: both; display: block;
 }

Seguidamente daremos estilo a los submenús y al hover, para que cuando estemos encima de la opción cambie a otro color más visotoso.

nav ul li {
 float: left;
}
 nav ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
 }
  nav ul li:hover a {
   color: #fff;
  }
 
 nav ul li a {
  display: block; padding: 25px 40px;
  color: #757575; text-decoration: none;
 }
 
nav ul ul {
 background: #5f6975; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;
}
 nav ul ul li {
  float: none; 
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
 }
  nav ul ul li a {
   padding: 15px 40px;
   color: #fff;
  } 
   nav ul ul li a:hover {
    background: #4b545f;
   }

El paso final es posicionar a la sub-sub-menús. Estos menús se heredan todo el estilo del submenú, así que todo lo que necesitan es ser posicionado absolutamente a la derecha (a la izquierda: 100%) de la posición relativa de los padres

.

nav ul ul ul {
 position: absolute; left: 100%; top:0;
}

Ahora solo queda probarlo y que funcione...