Aquest és un manual sobre com crear la gota pura CSS menú desplegable sense usar Javascript. Em vaig adonar però, que la gent sol usar Javascript per aconseguir aquest efecte. En realitat, hi ha una manera senzilla de fer-ho només amb CSS.

Aquí està el exemple

Primer pas: creem una estructura bàsica d'HTML.

  > <Span id = "capçalera">
 <h1> 's Paradise donem per a desenvolupadors </ h1>
 > <Ul id = "menu">
 <li> <span> Inici </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Element de menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Element de menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> element de menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Qui som </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Element de menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Element de menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> element de menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Productes </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Element de menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Element de menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> element de menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Segon pas: Ara crearem codi màgic CSS

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

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

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

 # Capçalera {
 ; alçada: 120px; position: relative;
 ; de fons: # 333;
 }

 # Menú {
 marge: 0px;
 farcit: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Menú li> {
 list-style-type: none;
 float: left;
 display: block;
 ; marge: 10px 0px;
 position: relative;
 farcit: 10px;
 ample: 100px;
 }

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

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

 # Menú ul li {
 marge: 0px;
 farcit: 0px;
 display: none;
 }
 # Menú li ul li {
 list-style-type: none;
 ; marge: 10px 0 0 0;
 font-size: 11px;
 }

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

 a { # Menú li ul li: hover {un
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Li menú span {
 cursor: pointer;
 ; marge: 10px 0px;
 font-weight: bold;
 ; font-size : 11px ; color: # FFF; font-size: 11px;
 } 

Tingueu en compte que aquest codi no funciona en Internet Explorer 6 (aquest navegador pobre no sap el que significa ul li>).

Estaria molt agraït si vostè podria tenir un segon per ajudar a promocionar el meu blog i compartir aquest enllaç amb qualsevol dels seus llocs de xarxes afavorida amb l'enllaç de sota. Aquí hi ha un enllaç al nostre lloc preferit si voleu registrar un nom de domini .

Filed under: Css , Tutorials per admin