випадаючий список на CSS

Сьогодні хочу представити невеликий «рецепт» створення списку на CSS. Ніякого JQuery, ніякого CSS3 - тільки старий, добрий, кросбраузерності CSS. Приклад досить простий, тому досвідченим товаришам, можливо, буде нецікаво. Будемо реалізовувати випадає з соціальними кнопками.

Тож не будемо довго розмірковувати, перейдемо відразу до справи

HTML

<div class="droplink">
<h3><a href="#">Поделись записью</a></h3>
<ul>
<li class="facebook"><a href="#" target="_blank">Facebook</a></li>
<li class="twitter"><a href="#" target="_blank">Twitter</a></li>
<li class="gplus"><a href="#" target="_blank">Google Plus</a></li>
<li class="vk"><a href="#" target="_blank">ВКонтакте</a></li>
<li class="rss"><a href="#" target="_blank">RSS</a></li>
</ul>
</div> 

 Я свідомо опускаю загальні моменти, на зразок підключення стилів, щоб коду не розростався. Внизу сторінки я дам посилання на оригінали - там все є.
Що у нас в HTML - звичайний список і незвичайний заголовок. Його незвичайність у тому, що зроблений він гіперпосиланням, яка дозволяє відстежити подія: hover, тобто наведення. Список, що випадає працюватиме при наведенні курсору на заголовок.

CSS

 Для початку розглянемо базові стилі випадаючого списку. Я намагався коментувати кожну рядок коду, щоб було зрозуміліше:

/ * Скинемо відступи * /
. droplink ul,. droplink h3,. droplink h3 a {
padding: 0; margin: 0
}
/ * Базова обгортка * /
. droplink {
width: 200px;
position: absolute;
margin: 10px 0 0 25px
}
/ * Стиль блоку при наведенні * /
. droplink: hover {
height: auto;
background-color: # 3E403D;
border: solid 1px # 3A3C39
}
/ * Тема в звичайному стані * /
. droplink h3 a {
text-align: center;
width: 100%;
display: block;
padding: 12px 0px;
color: # 999;
text-decoration: none
}
. droplink h3 a img {border: none}
/ * Стиль для заголовка при наведенні * /
. droplink: hover h3 a {
color: # FFF;
font-weight: bold;
position: absolute
}

Тут нічого особливого, вказали розміри і стиль блоку, стиль заголовка і для обох елементів - їх стилі при наведенні курсору. Йдемо далі: 

/ * Приховуємо список без наведення * /
. droplink ul {
list-style: none;
display: none
}
/ * Відображаємо список при наведенні * /
. droplink: hover ul {
display: block;
margin-top: 40px
}
. droplink li {display: block}

 Цей код вже цікавіше і показує, як веде себе  випадаючий список при наведенні курсору. У звичайному стані коштує display: none, тобто він не відображається. При наведенні - показуємо його блоком. Ось і весь секрет. Тепер трохи оформимо елементи списку і вставимо іконки:

/ * Стиль елемента списку * /
. droplink li a {
padding: 5px 12px 4px 34px;
margin: 1px;
background-color: # 484A47;
display: block;
color: # FFF;
text-decoration: none;
font-size: 12px;
background-repeat: no-repeat;
background-position: 10px 3px
}
/ * Стиль елемента при наведенні * /
. droplink li a: hover {
background-color: # 999
}
/ * Іконки * /
. facebook a {background-image: url ("icons / facebook.png")}
. twitter a {background-image: url ("icons / twitter.png")}
. vk a {background-image: url ("icons / vk.png")}
. rss a {background-image: url ("icons / rss.png")}
. gplus a {background-image: url ("icons / gplus.png")}

 Ось, власне, і все. Список, що випадає готовий і виглядає досить симпатично. Можна оформити елементи на свій розсуд, додати закруглених кутів та інших «примочок».

Якщо необхідно, щоб список «перекривав» текст під ним при наведенні - дивіться в бік z-index.

Якщо щось незрозуміло або не виходить - питайте в коментарях.
Вдалого дня :)