Este é un titorial sobre como crear drop down menu CSS puro, sen usar javascript. Notei sen embargo, que moitas veces as persoas utilizan o JavaScript para conseguir este efecto. En realidade, hai un xeito sinxelo de facelo só con CSS.

Aquí está o exemplo

Primeiro paso: creamos unha estrutura HTML básico.

  > <Div id = "header">
 <h1> Developer's Paradise demos </ h1>
 > <Ul id = "menú">
 <li> <span> Home </ a>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> elemento Menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> elemento Menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> elemento Menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> About Us </ a>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> elemento Menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> elemento Menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> elemento Menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produtos </ a>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> elemento Menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> elemento Menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> elemento Menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Segundo paso: Agora imos crear o código CSS maxia

  ; padding : 0 ; } } * {Margin: 0; padding: 0;

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; font: 100% normal Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # FFF;}

 # Header {
 ; height: 120px; position: relativismo;
 ; background: # 333;
 }

 # Menú {
 Margin: 0px;
 padding: 0px;
 position: absoluta;
 ; top: 70px;
 display: block;
 }

 # Menú li> {
 list-style-type: none;
 float: left;
 display: block;
 ; Margin: 10px 0px;
 position: relativismo;
 padding: 10px;
 width: 100px;
 }

 ul { #> Menú li: hover ul {
 display: block;
 }

 { #> Menú li: hover {
 ; -Cor de fondo: # 808080;
 -Moz-border-radius: 10px;
 -WebKit-border-radius: 10px;
 }

 # Menú ul li {
 Margin: 0px;
 padding: 0px;
 display: none;
 }
 # Menú li ul li {
 list-style-type: none;
 ; Margin: 10px 0 0 0;
 -Tamaño da fonte: 11px;
 }

 # Menú li ul li a {
 display: block;
 ; padding: 10px 5px;
 ; color: # FFF;
 Decoración de texto: none;
 Font-weight: bold;
 }

 a { # Menú li ul li: hover {un
 ; -Cor de fondo: # 606060;
 -Moz-border-radius: 5px;
 -WebKit-border-radius: 5px;
 }

 # Menú li {p
 cursor: Point;
 ; Margin: 10px 0px;
 Font-weight: bold;
 ; font-size : 11px ; color: # FFF;-size font: 11px;
 } 

Teña en conta que este código non funciona no IE6 (ese navegador pobres simplemente non sabe o que significa ul li>).

Quedaría moi grata se puidese ter un segundo para axudar a impulsar o meu blog e compartir ese enlace con calquera dos seus sitios de rede favorecidas a través do seguinte ligazón. Aquí está o enlace para o noso sitio preferido, se quere rexistrar un nome de dominio .

Arquivo en: CSS , Tutoriais por admin