Este é um tutorial sobre como criar Drop down menu CSS puro, sem usar javascript. Notei no entanto, que muitas vezes as pessoas utilizam o JavaScript para conseguir esse efeito. Na verdade, existe uma maneira simples de fazê-lo apenas com CSS.

Aqui está o exemplo

Primeiro passo: criamos uma estrutura HTML básico.

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

Segundo passo: Agora vamos criar o código CSS magia

  ; 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: relative;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Menu li> {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 10px 0px;
 position: relative;
 padding: 10px;
 width: 100px;
 }

 ul { #> Menu li: hover ul {
 display: block;
 }

 { #> Menu li: hover {
 ; -Cor de fundo: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

 # Menu ul li {
 margin: 0px;
 padding: 0px;
 display: none;
 }
 # Menu li ul li {
 list-style-type: none;
 ; margin: 10px 0 0 0;
 -Tamanho da fonte: 11px;
 }

 # Menu li ul li a {
 display: block;
 ; padding: 10px 5px;
 ; color: # fff;
 Decoração de texto: none;
 Font-weight: bold;
 }

 a { # Menu li ul li: hover {um
 ; -Cor de fundo: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Menu li {span
 cursor: pointer;
 ; margin: 10px 0px;
 Font-weight: bold;
 ; font-size : 11px ; color: # fff;-size font: 11px;
 } 

Por favor note que este código não funciona no IE6 (esse navegador pobres simplesmente não sabe o que significa ul li>).

Ficaria muito grato se você pudesse ter um segundo para ajudar a promover o meu blog e compartilhar esse link com qualquer um dos seus sites de rede favorecidas através do link abaixo. Aqui está um link para o nosso site preferido, se você quiser registrar um nome de domínio .

Arquivado em: CSS , Tutoriais por admin