Ito ay isang tutorial sa kung paano lumikha ng purong CSS Drop down menu na walang gamit javascript. Napansin ko gayunpaman, na ang mga tao madalas na gamitin ang JavaScript upang makamit ito epekto. Actually, may isang simpleng paraan upang gawin ito lamang sa CSS.

Narito ang halimbawa

Hakbang unang: gumawa kami ng isang pangunahing istraktura ng HTML.

  > <Div id = "header">
 <h1> Developer's Paradise demo </ h1>
 > <Ul id = "menu">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu item 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Tungkol sa Amin </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu item 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Products </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu item 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Hakbang ikalawang: ngayon lumikha kami magic CSS code

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

 katawan {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; font: 100% normal Arial, Helvetica, sans-serif;
 }

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

 # Header {
 ; height: 120px; position: kamag-anak;
 ; background: # 333;
 }

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

 # Menu> li {
 listahan-style-uri: none;
 float: kaliwa;
 display: block;
 ; margin: 0px 10px;
 posisyon: kamag-anak;
 padding: 10px;
 width: 100px;
 }

 ul { # Menu> li: mag-agaw-buhay ul {
 display: block;
 }

 { # Menu> li: mag-agaw-buhay {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -WebKit-hangganan-radius: 10px;
 }

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

 # Menu li ul li {isang
 display: block;
 ; padding: 5px 10px;
 ; color: # fff;
 text-labor: none;
 font-weight: bold;
 }

 a { # Menu li ul li: mag-agaw-buhay ng isang {
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -WebKit-hangganan-radius: 5px;
 }

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

Mangyaring tandaan na ang code na ito ay hindi gumagana sa IE6 (ito mahihirap na browser lamang ay hindi malaman kung ano ang ul> li nangangahulugan).

Gusto ko ay nagpapasalamat kung ka could kumuha ng isang pangalawang upang makatulong itaguyod ang aking blog at ibahagi ang link na ito sa anumang ng iyong napaboran networking sites gamit ang link sa ibaba. Narito ang isang link sa aming mga ginustong site kung nais mong magrehistro ng isang domain name .

Filed under: CSS , Tutorials sa pamamagitan ng admin