Это учебник о том, чтобы создать чистый CSS выпадающее меню без использования JavaScript. Я заметил, однако, что люди часто используют JavaScript для достижения этого эффекта. На самом деле, существует простой способ сделать это только с CSS.

Вот пример

Шаг первый: мы создаем основные структуры HTML.

  > <DIV ID = "заголовок">
 <h1> разработчика Рай демонстрационные ролики </ h1>
 > <Улица ID = "Меню">
 <li> <span> Главная страница </ 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>
 </ UL>
 </ LI>
 <li> <span> О компании </ 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>
 </ UL>
 </ LI>
 <li> <span> Продукция </ 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>
 </ UL>
 </ LI>
 </ UL>
 </ DIV> 

Шаг второй: Теперь мы создадим волшебный CSS кода

  ; padding : 0 ; } * {Маржа: 0; обивка: 0;}

 BODY {
 ; Справочная информация: # 222;
 Arial, Helvetica, sans-serif ; Шрифт: 100% нормального Arial, Helvetica, без засечек;
 }

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

 # {Заголовок
 ; Высота: 120px; положение: относительная;
 ; Справочная информация: # 333;
 }

 # {Меню
 поле: 0px;
 дополнение: 0px;
 Позиция: абсолютная;
 ; Top: 70px;
 Дисплей: блок;
 }

 # Меню> LI {
 Список стиле типа: нет;
 плавать: слева;
 Дисплей: блок;
 ; поле: 0px 10px;
 должность: относительная;
 обивка: 10px;
 ширина: 100px;
 }

 ul { # Меню> Li: наведите улица {
 Дисплей: блок;
 }

 { # Меню> Li: наведите {
 ; фонового цвета: # 808080;
 -МОЗ границы радиуса: 10px;
 -WebKit границы радиуса: 10px;
 }

 # Меню Li улица {
 поле: 0px;
 дополнение: 0px;
 Дисплей: нет;
 }
 # Меню Li Li {улица
 Список стиле типа: нет;
 ; поле: 10px 0 0 0;
 Размер шрифта: 11px;
 }

 # Меню Li Li улица {
 Дисплей: блок;
 ; обивка: 5px 10px;
 ; цвет: # FFF;
 текст-отделка: нет;
 начертание шрифта: жирный;
 }

 a { # Меню Li Li улица: наведите {
 ; фонового цвета: # 606060;
 -МОЗ границы радиуса: 5px;
 -WebKit границы радиуса: 5px;
 }

 # Меню Li Span {
 Курсор: указатель;
 ; поле: 0px 10px;
 начертание шрифта: жирный;
 ; font-size : 11px ; цвет: # FFF; Размер шрифта: 11px;
 } 

Пожалуйста, обратите внимание, что этот код не работает в IE6 (эта бедная браузер просто не знает, что улица> означает, Li).

Я был бы признателен, если бы вы могли взять вторую, чтобы помочь продвинуть мой блог и поделиться ссылку с любым из ваших благоприятствования сетей по ссылке ниже. Вот ссылка на наш партнер сайт, если вы хотите зарегистрировать доменное имя .

Рубрики: Css , Учебники по администратора