Ово је туториал о томе како да креирате ЦСС чиста падајућем менију без коришћења ЈаваСцрипт. Међутим приметио сам да људи често користе ЈаваСцрипт да се то постигне ефекат. Заправо, постоји једноставан начин да то урадите само са ЦСС-ом.

Овде је пример

Корак први: ми стварамо основни ХТМЛ структуру.

  > <Див ид = "Заглавље">
 <х1> Девелопер'с Парадисе демо </ Х1>
 > <Ул ид = "Мени">
 <ли> <спан> Почетак </ п>
 <ул>
 > Menu item 1 </a> </li> <ли> < хреф = "#"> Мени ставка 1 </ а> </ п>
 > Menu item 2 </a> </li> <ли> < хреф = "#"> Мени ставка 2 </ а> </ п>
 > Menu item 3 </a> </li> <ли> < хреф = "#"> Мени ставка 3 </ а> </ п>
 </ Ул>
 </ П>
 <ли> <спан> О нама </ п>
 <ул>
 > Menu item 1 </a> </li> <ли> < хреф = "#"> Мени ставка 1 </ а> </ п>
 > Menu item 2 </a> </li> <ли> < хреф = "#"> Мени ставка 2 </ а> </ п>
 > Menu item 3 </a> </li> <ли> < хреф = "#"> Мени ставка 3 </ а> </ п>
 </ Ул>
 </ П>
 <ли> <спан> Производи </ п>
 <ул>
 > Menu item 1 </a> </li> <ли> < хреф = "#"> Мени ставка 1 </ а> </ п>
 > Menu item 2 </a> </li> <ли> < хреф = "#"> Мени ставка 2 </ а> </ п>
 > Menu item 3 </a> </li> <ли> < хреф = "#"> Мени ставка 3 </ а> </ п>
 </ Ул>
 </ П>
 </ Ул>
 </ Див> 

Корак други: сад правимо магију ЦСС код

  ; padding : 0 ; } * {Маргин: 0; паддинг: 0;}

 тела {
 ; бацкгроунд: # 222;
 Arial, Helvetica, sans-serif ; фонт-сизе: 100% нормалне Ариал, Хелветица, санс-сериф;
 }

 : #fff ; } Х1 {цолор: # ФФФ;}

 # Заглавље {
 ; висина: 120пк; Позиција: релативна;
 ; бацкгроунд: # 333;
 }

 # Мени {
 маргин: 0пк;
 паддинг: 0пк;
 поситион: абсолуте;
 ; Топ: 70пк;
 дисплаи: блоцк;
 }

 # Мени> Ли {
 лист-стиле-типе: ноне;
 пловак: лево;
 дисплаи: блоцк;
 ; маргин: 10пк 0пк;
 положај: релативна;
 паддинг: 10пк;
 ширина: 100пк;
 }

 ul { # Мени> Ли: ховер {ул
 дисплаи: блоцк;
 }

 { # Мени> Ли: ховер {
 ; бацкгроунд-цолор: # 808080;
 -Моз-бордер-радиус: 10пк;
 -ВебКит-граница-радијус: 10пк;
 }

 # Мени ли {ул
 маргин: 0пк;
 паддинг: 0пк;
 дисплаи: ноне;
 }
 # Мени ли ул ли {
 лист-стиле-типе: ноне;
 ; паддинг: 10пк 0 0 0;
 фонт-сизе: 11пк;
 }

 # Мени ли ул ли {
 дисплаи: блоцк;
 ; бордер: 5пк 10пк;
 ; цолор: # ФФФ;
 тект-алигн: нико;
 фонт-веигхт: болд;
 }

 a { # Мени ли ул ли: ховер {
 ; бацкгроунд-цолор: # 606060;
 -Моз-бордер-радиус: 5пк;
 -ВебКит-граница-радијус: 5пк;
 }

 # Мени ли {п
 тект-алигн: показивач;
 ; маргин: 10пк 0пк;
 фонт-веигхт: болд;
 ; font-size : 11px ; цолор: # ФФФ; фонт-сизе: 11пк;
 } 

Имајте на уму да овај код не ради у ИЕ6 (овај сиромашни прегледач једноставно не зна шта ул> Ли средствима).

Ја бих био захвалан ако би могао узети други да помогне промовисати мој блог и делите овај линк са неким од Ваш омиљени сајтови користећи линк испод. Овде је линк на наш жељени сајт Ако желите да региструјете име домена .

Подастрт испод: ЦСС , Туториали админ