Ky eshte nje tutorial se si të krijoni të pastër CSS Drop down menu pa përdorur javascript. Kam vënë re megjithatë, se njerëzit shpesh përdorin Java skriptet për të arritur këtë efekt. Në fakt, nuk është një mënyrë e thjeshtë për të bërë atë vetëm me CSS.

Këtu është shembull

Hapi i parë: kemi krijuar një strukturë të thjeshtë të HTML.

  > <Div id = "header">
 <h1> Parajsa popull i Developer </ h1>
 > <Ul id = "menu">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> pika Menu 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> pika Menu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> pika Menu 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Rreth nesh </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> pika Menu 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> pika Menu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> pika Menu 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produkte </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> pika Menu 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> pika Menu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> pika Menu 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Hapi i dytë: tani ne kemi krijuar kodin magji CSS

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

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

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

 # Header {
 ; Lartësia: 120px; pozicionin: relative;
 ; background: # 333;
 }

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

 #> Menu li {
 List-style-type: none;
 float: majtas;
 display: block;
 ; margin: 10px 0px;
 pozicionin: relative;
 padding: 10px;
 width: 100px;
 }

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

 { # Menu> li: hover {
 ; Background-color: # 808080;
 -Moz-kufirit-rreze: 10px;
 -WebKit kufirit-rreze: 10px;
 }

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

 # Menu li ul li {a
 display: block;
 ; padding: 5px 10px;
 ; color: # fff;
 Text-decoration: none;
 Font-weight: bold;
 }

 a { # Menu ul li li: hover {a
 ; Background-color: # 606060;
 -Moz-kufirit-rreze: 5px;
 -WebKit kufirit-rreze: 5px;
 }

 # Li menu span {
 kursorit: pointer;
 ; margin: 10px 0px;
 Font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Ju lutem vini re se ky kod nuk ka punë në IE6 (këtë shfletues të dobët nuk e di se çfarë do të thotë ul> li).

Unë do të jenë mirënjohës nëse ju mund të marrë një të dytë për të ndihmuar në promovimin e blogun tim dhe ta ndajnë këtë lidhje me ndonjë nga tuaj faqet e rrjeteve të favorizuar duke përdorur lidhjen më poshtë. Këtu është një lidhje për të preferuar faqen tonë në qoftë se ju dëshironi të regjistruar një emër domain .

Paraqitur sipas: Css , Tutorials nga admin