Выпадающий список на 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.

Посмотреть в работе Скачать исходники

Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>

Удачного дня