Понедельник, 07 Мая 2012 09:20

Выпадающее меню с помощью HTML, CSS

Written by 
Оцени эту запись
(2 Голоса)

Часто на сайте нужно сделать выпадающее меню, когда при наведении на раздел, появляются подпункты меню. 

В этой статье я расскажу как сделать горизонтальное меню с основными рзделами и с выпадающими при наведении подразделами.

 

Сделаем такую структуру:

  • Главная
  • О компании
  • Услуги
    • Услуга 1
    • Услуга 2
    • Услуга 3
  • Контакты

Список услуг будет скрыт. А при наведении на пункт "Услуги", появится.

 

HTML:

 

<ul class="dropdown_menu">

<li><a href="#">Главная</a></li>

<li><a href="#">О компании</a></li>

<li><a href="#">Услуги</a>

<div class="dropdown_submenu">

<ul>

<li><a href="#">Услуга 1</a></li>

<li><a href="#">Услуга 2</a></li>

<li><a href="#">Услуга 3</a></li>

</ul>

</div>

</li>

<li class="last"><a href="#">Контакты</a></li>

</ul>

 

CSS:

 

.dropdown_menu {list-style-type: none;}
 
.dropdown_menu li {float:left; position: relative;}
 
.dropdown_menu li a {color: #EE3B3B; text-decoration: none; padding: 2px 10px; border-right: 1px solid #222;}
 
.dropdown_menu li.last a {border-right: none;}
 
.dropdown_menu li:hover a {color: #FF6A6A}
 
.dropdown_submenu {display: none; width: 80px; background: #000; padding: 5px; position: absolute; top: 27px; left: -5px; z-index: 999;}
 
.dropdown_menu li:hover .dropdown_submenu, .dropdown_menu li .dropdown_submenu:hover {display: block;}
.itemBody ul.dropdown_menu li { background: #000; padding: 5px; margin-lefT: 0px;}
ul.dropdown_menu li .dropdown_submenu ul li {float: none; padding: 3px 0; border-bottom: 1px dotted #CD3333; background: none;}
.dropdown_menu li .dropdown_submenu ul li a {color: #8B1A1A; border-right: none;}
.dropdown_menu li .dropdown_submenu ul li:hover a {color: #CD2626}

 

 

Смотрим, что получилось:

 

 

 

 

 

Оформление подбирайте под себя. Ключевое здесь - скрыть блок dropdown_submenu с помощью свойства display: none; и показать его при наведении на родительский элемент списка

 

.dropdown_menu li:hover .dropdown_submenu {display: block;}

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов