Това е ръководство за това как да създадете чист CSS падащо меню, без да използвате JavaScript. Забелязах обаче, че хората често използват JavaScript за да постигне този ефект. Всъщност, там е прост начин да го направя само с CSS.

Ето и пример

Стъпка първа: да създадем основната структура на HTML.

  > <DIV ID = "заглавна част">
 <h1> Developer's Paradise демонстрации </ h1>
 > <Ул идентификатор = "Меню">
 <li> <span> Начало </ педя>
 <ul>
 > Menu item 1 </a> </li> <li> <един HREF = "#"> Меню т. 1 </ A> </ LI>
 > Menu item 2 </a> </li> <li> <един HREF = "#"> Меню т. 2 </ A> </ LI>
 > Menu item 3 </a> </li> <li> <един HREF = "#"> Меню т. 3 </ A> </ LI>
 </ Ул.>
 </ LI>
 <li> <span> За нас </ педя>
 <ul>
 > Menu item 1 </a> </li> <li> <един HREF = "#"> Меню т. 1 </ A> </ LI>
 > Menu item 2 </a> </li> <li> <един HREF = "#"> Меню т. 2 </ A> </ LI>
 > Menu item 3 </a> </li> <li> <един HREF = "#"> Меню т. 3 </ A> </ LI>
 </ Ул.>
 </ LI>
 <li> <span> продукти </ педя>
 <ul>
 > Menu item 1 </a> </li> <li> <един HREF = "#"> Меню т. 1 </ A> </ LI>
 > Menu item 2 </a> </li> <li> <един HREF = "#"> Меню т. 2 </ A> </ LI>
 > Menu item 3 </a> </li> <li> <един HREF = "#"> Меню т. 3 </ A> </ LI>
 </ Ул.>
 </ LI>
 </ Ул.>
 </ DIV> 

Стъпка втора: сега ние създаваме магията CSS код

  ; padding : 0 ; } * {Граница: 0; пълнеж: 0;}

 орган {
 ; фон: # 222;
 Arial, Helvetica, sans-serif ; шрифта: 100% нормални Arial, Helvetica, без-сериф;
 }

 : #fff ; } h1 {цвят: # FFF;}

 # Заглавието {
 ; Височина: 120px; позиция: относителна;
 ; фон: # 333;
 }

 # Меню {
 марж: 0px;
 пълнеж: 0px;
 позиция: абсолютно;
 ; нагоре: 70px;
 дисплей: блок;
 }

 # Меню> Ли {
 Списъкът-стил тип: няма;
 поплавъка: ляво;
 дисплей: блок;
 ; марж: 0px 10px;
 позиция: относителна;
 пълнеж: 10px;
 ширина: 100 пиксела;
 }

 ul { # Меню> ли: мишката ул. {
 дисплей: блок;
 }

 { # Меню> ли: мишката {
 ; фон-цвят: # 808080;
 -Moz-граница радиус: 10px;
 -WebKit-граница радиус: 10px;
 }

 # Меню Ли ул {
 марж: 0px;
 пълнеж: 0px;
 дисплей: няма;
 }
 # Меню Ли Ли ул {
 Списъкът-стил тип: няма;
 ; марж: 10px 0 0 0;
 шрифт, размер: 11px;
 }

 # Меню Ли ул ли един {
 дисплей: блок;
 ; пълнеж: 5px 10px;
 ; цвят: # FFF;
 текст декорация: няма;
 шрифт тегло: смели;
 }

 a { # Меню Ли Ли ул: мишката една {
 ; фон-цвят: # 606060;
 -Moz-граница радиус: 5px;
 -WebKit-граница радиус: 5px;
 }

 # Меню ли участъка {
 курсора: показалка;
 ; марж: 0px 10px;
 шрифт тегло: смели;
 ; font-size : 11px ; цвят: # FFF; шрифт с размер: 11px;
 } 

Моля, обърнете внимание, че този код не работи в IE6 (този беден браузъра просто не знае какво ул> ли път).

Ще Ви бъда благодарен, ако можете да вземе втора, за насърчаване на моя блог и да споделят тази връзка с някой от вашите облагодетелствана мрежи използвате линка по-долу. Ето един линк към предпочитани нашия сайт, ако искате да регистрират име на домейн .

Намира в: Css , уроци от администратор