Toto je návod, jak vytvořit čistě CSS Drop down menu bez použití JavaScriptu. Všiml jsem si však, že lidé často používají JavaScript k dosažení tohoto efektu. Vlastně, tam je jednoduchý způsob, jak to udělat jen s CSS.

Zde je příklad

Krok první: vytvoříme základní strukturu HTML.

 > <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> vývojáře Paradise dema </ h1> <ul id = "menu"> <li> <span> Home </ span> <ul> <li> < href = "#" > Menu položka 1 </ a> </ li> <li> < href = "#"> Menu bodu 2 </ a> </ li> <li> < href = "#"> Menu položka 3 </ > </ li> </ ul> </ li> <li> <span> O nás </ span> <ul> <li> < href = "#"> Menu položka 1 </ a> </ li > <li> < href = "#"> Menu bodu 2 </ a> </ li> <li> < href = "#"> Menu položka 3 </ a> </ li> </ ul> < / li> <li> <span> Produkty </ span> <ul> <li> < href = "#"> Menu položka 1 </ a> </ li> <li> < href = "#"> položka menu 2 </ a> </ li> <li> < href = "#"> Menu bodu 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Krok druhý: teď jsme vytvořit kouzlo CSS kódu

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

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

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

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

 # Menu {
 rozpětí: 0px;
 padding: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Menu> li {
 list-style-typ: none;
 float: left;
 display: block;
 ; rozpětí: 0px 10px;
 position: relative;
 padding: 10px;
 šířka: 100px;
 }

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

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

 # Menu ul li {
 rozpětí: 0px;
 padding: 0px;
 display: none;
 }
 # Menu ul li {li
 list-style-typ: none;
 ; rozpětí: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu ul li {li
 display: block;
 ; padding: 5px 10px;
 ; Barva: # fff;
 text-decoration: none;
 font-hmotnost: tučně;
 }

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

 # Menu li {rozpětí
 Kurzor: ukazatel;
 ; rozpětí: 0px 10px;
 font-hmotnost: tučně;
 ; font-size : 11px ; Barva: # fff; font-size: 11px;
 } 

Vezměte prosím na vědomí, že tento kód nefunguje v IE6 (tato chudá prohlížeč prostě neví, co ul> li prostředky).

Byl bych Vám vděčen, kdybyste mohl vzít druhou pomoci propagovat můj blog a podělit se tento odkaz se některý z vašich favorizoval sítí pomocí odkazu níže. Zde je odkaz na naše stránky, pokud preferovaný chcete zaregistrovat název domény .

Soubor pod: Css , Návody od admin