Tas ir apmācība par to, kā izveidot tīru CSS nolaižamo izvēlni, neizmantojot JavaScript. Es pamanīju, ka tomēr cilvēki bieži izmanto JavaScript, lai sasniegtu šo efektu. Patiesībā, ir vienkāršs veids, kā to izdarīt tikai ar CSS.

Šeit ir piemērs

Solis vispirms: mēs izveidojam HTML struktūru.

 > <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> izstrādātāju Paradise demo </ h1> <ul id = "menu"> <li> <span> Sākums </ span> <ul> <li> < href = "#" > Izvēlnes vienums 1 </ a> </ li> <li> < href = "#"> Izvēlnes vienums 2 </ a> </ li> <li> < href = "#"> Izvēlnes vienums 3 </ a> </ li> </ ul> </ li> <li> <span> Par mums </ span> <ul> <li> < href = "#"> Izvēlnes vienums 1 </ a> </ li > <li> < href = "#"> Izvēlnes vienums 2 </ a> </ li> <li> < href = "#"> Izvēlnes vienums 3 </ a> </ li> </ ul> < / li> <li> <span> Produkti </ span> <ul> <li> < href = "#"> Izvēlnes vienums 1 </ a> </ li> <li> < href = "#"> izvēlnes vienums 2 </ a> </ li> <li> < href = "#"> Izvēlnes vienums 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Solis otrkārt: tagad mēs radītu burvju CSS kodu

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

 ķermeņa {
 ; fona: 222 #;
 Arial, Helvetica, sans-serif ; font: 100% parastā Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {krāsa: # FFF;}

 # Header {
 ; augstums: 120px; amats: radinieku;
 ; fona: 333 #;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 pozīcija: absolūtas;
 ; top: 70px;
 display: block;
 }

 # Menu> li {
 Sarakstā-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 position: radinieku;
 padding: 10px;
 platums: 100px;
 }

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

 { # Menu> li: hover {
 ; fona krāsu: 808080 #;
 -Moz-robežu rādiuss: 10px;
 -WebKit robežas rādiusu: 10px;
 }

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

 # Menu li ul li {
 display: block;
 ; padding: 5PX 10px;
 ; krāsa: # FFF;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Menu li ul li: hover {
 ; fona krāsu: 606060 #;
 -Moz-robežu rādiuss: 5PX;
 -WebKit robežas rādiusu: 5PX;
 }

 # Menu li span {
 kursoru: rādītāju;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; krāsa: # FFF; font-size: 11px;
 } 

Lūdzu, ņemiet vērā, ka šis kods nedarbojas IE6 (šī sliktā pārlūkprogramma vienkārši nezina, ko ul> li līdzekļus).

Es būtu pateicīgs, ja Jūs varētu otru, lai palīdzētu veicināt manu blogu un dalīties saikni ar kādu no jūsu labvēlīgo tīkla vietnēm, izmantojot saiti zemāk. Šeit ir saite uz mūsu vēlamo vietni, ja vēlaties reģistrēt domēna vārdu .

Iesniegts saskaņā ar: Css , konsultācijas admin