Questo è un tutorial su come creare puro CSS Drop down menu senza usare javascript. Ho notato però che spesso le persone usano JavaScript per ottenere questo effetto. In realtà, c'è un modo semplice per farlo solo con i CSS.

Ecco l' esempio

Primo passo: creiamo una struttura di base HTML.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <Div id = "header"> <h1> Developer's Paradise demo </ h1> <ul id = "menu"> <li> <span> Home </ span> <ul> <li> <a href = "#" > Voce di menu 1 </ a> </ li> <li> <a href = "#"> Voce di menu 2 </ a> </ li> <li> <a href = "#"> voce di menu 3 </ a> </ li> </ ul> </ li> <li> <span> Chi siamo </ span> <ul> <li> <a href = "#"> Menu item 1 </ a> </ li > <li> <a href = "#"> Voce di menu 2 </ a> </ li> <li> <a href = "#"> Voce di menu 3 </ a> </ li> </ ul> < / li> <li> <span> Prodotti </ span> <ul> <li> <a href = "#"> Menu item 1 </ a> </ li> <li> <a href = "#"> Voce di menu 2 </ a> </ li> <li> <a href = "#"> Voce di menu 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Secondo passo: ora creiamo la magia di codice CSS

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

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; font: 100% normale 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: 0px 10px;
 position: relative;
 padding: 10px;
 larghezza: 100px;
 }

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

 { # Menu> li: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

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

 # Menu li ul li a {
 display: block;
 ; padding: 10px 5px;
 ; color: # FFF;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Menu ul li li: hover a {
 ; background-color: # 606.060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

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

Si prega di notare che questo codice non funziona in IE6 (questo browser povero proprio non sa cosa significa ul li>).

Le sarei grato se tu potessi fare un secondo per contribuire a promuovere il mio blog e condividere questo link con uno dei tuoi siti di networking preferito utilizzando il link sottostante. Questo è il link al nostro sito preferito, se si vuole registrare un dominio .

Archiviato in: Css , Tutorial by admin