Din hija tutorja dwar kif tinħoloq pur Drop CSS down menu mingħajr l-użu javascript. I ndunat madankollu, li n-nies spiss jużaw JavaScript biex jinkiseb dan l-effett. Attwalment, hemm mod sempliċi biex tagħmel dan biss bl CSS.

Hawn hu l- eżempju

Ewwel pass: noħolqu struttura HTML bażiku.

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

Tieni pass: issa għandna joħolqu magic kodiċi CSS

  ; padding : 0 ; } *} {Marġini: 0; ikkuttunar: 0;

 korp {
 ; isfond: # 222;
 Arial, Helvetica, sans-serif ; font: 100% normali Arial, Helvetica, sans-Serif;
 }

 : #fff ; } h1 {kulur: fff #;}

 # Header {
 ; għoli: 120px; pożizzjoni: relattivi;
 ; isfond: # 333;
 }

 # Menu {
 marġini: 0px;
 ikkuttunar: 0px;
 pożizzjoni: assoluta;
 ; top: 70px;
 display: block;
 }

 > # LI menu {
 -Lista istil tat-tip: xejn;
 float: xellug;
 display: block;
 ; marġini: 10px 0px;
 pożizzjoni: relattivi;
 ikkuttunar: 10px;
 wisa ': 100px;
 }

 ul { # Menu> LI: ul imbagħad jerġgħu {
 display: block;
 }

 { # Menu> LI: imbagħad jerġgħu {
 ; -Sfond kulur: # 808080;
 -Moz-konfinali-raġġ: 10px;
 -WebKit-konfinali-raġġ: 10px;
 }

 # Menu LI ul {
 marġini: 0px;
 ikkuttunar: 0px;
 display: none;
 }
 # Menu LI ul LI {
 -Lista istil tat-tip: xejn;
 ; marġini: 10px 0 0 0;
 Font-size: 11px;
 }

 # Menu LI ul LI a {
 display: block;
 ; padding: 10px 5px;
 ; kulur: fff #;
 Test-tiżjin: xejn;
 Font-piż: bold;
 }

 a { # Menu LI ul LI: imbagħad jerġgħu a {
 ; -Sfond kulur: # 606060;
 -Moz-konfinali-raġġ: 5px;
 -WebKit-konfinali-raġġ: 5px;
 }

 # Menu LI span {
 cursor: werrej;
 ; marġini: 10px 0px;
 Font-piż: bold;
 ; font-size : 11px ; kulur: fff #; font-size: 11px;
 } 

Jekk jogħġbok innota li dan il-kodiċi ma taħdimx fil IE6 (dan il-browser foqra biss ma tkunx taf liema mezzi ul li>).

Inkun grat jekk inti tista 'tieħu t-tieni li jgħin jippromwovi blog tiegħi u jaqsmu din ir-rabta ma' xi siti favoriti tiegħek netwerking tuża l-link hawn taħt. Hawnhekk huwa link mas-sit tagħna preferuta jekk inti tixtieq li jirreġistraw isem ta 'dominju .

Filed under: Css , tutorials by admin