Toto je návod, ako vytvoriť čisto CSS Drop down menu bez použitia JavaScriptu. Všimol som si však, že ľudia často používajú JavaScript na dosiahnutie tohto efektu. Vlastne, tam je jednoduchý spôsob, ako to urobiť len s CSS.

Tu je príklad

Krok prvý: vytvoríme základnú štruktúru HTML.

  > <Div id = "header">
 <h1> vývojárov Paradise dema </ h1>
 > <Ul id = "menu">
 <li> <span> Úvod </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Menu položka 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Menu bodu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Menu položka 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> O nás </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Menu položka 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Menu bodu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Menu položka 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produkty </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Menu položka 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Menu bodu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Menu položka 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Krok druhý: teraz sme vytvoriť kúzlo CSS kódu

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

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; písmo: 100% normálny Arial, Helvetica, sans-serif;
 }

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

 # Header {
 ; výška: 120px; position: relative;
 ; background: # 333;
 }

 # Menu {
 rozpätie: 0px;
 padding: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Menu> ak {
 list-style-typ: none;
 float: left;
 display: block;
 ; rozpätie: 0px 10px;
 position: relative;
 padding: 10px;
 šírka: 100px;
 }

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

 { # Menu> ak: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

 # Menu ul ak {
 rozpätie: 0px;
 padding: 0px;
 display: none;
 }
 # Menu ul chcete {ak
 list-style-typ: none;
 ; rozpätie: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu ul chcete {ak
 display: block;
 ; padding: 5px 10px;
 ; Farba: # fff;
 text-decoration: none;
 font-hmotnosť: tučným písmom;
 }

 a { # Menu ul ak chcete: hover {
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Menu chcete {rozpätie
 Kurzor: ukazovateľ;
 ; rozpätie: 0px 10px;
 font-hmotnosť: tučným písmom;
 ; font-size : 11px ; Farba: # fff; font-size: 11px;
 } 

Vezmite prosím na vedomie, že tento kód nefunguje v IE6 (táto chudobná prehliadač proste nevie, čo ul> Ak prostriedky).

Bol by som Vám vďačný, keby mohol vziať druhú pomôcť propagovať môj blog a podeliť sa tento odkaz sa niektorý z vašich favorizoval sietí pomocou odkazu nižšie. Tu je odkaz na naše stránky, ak preferovaný chcete zaregistrovať názov domény .

Súbor pod: Css , Návody od admin