Выпадающее меню по клику средствами CSS без JavaScript

CSS позволяет реализовать выпадающее меню по клику без JavaScript. Сделать это можно c помощью CSS псевдоклассов :focus, :active, :hover и некоторых маленьких хитростей.

Ну что же, попробуем реализовать выпадение меню по клику на небольшом примере.
Допустим, у нас есть следующая html-структура:

<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a>
<ul class="sub-menu">
<li><a href="#1">подпункт 1</a></li>
<li><a href="#2">подпункт 2</a></li>
<li><a href="#3">подпункт 3</a></li>
</ul>


Список с классом «sub-menu» по-умолчанию будет скрыт, и будет появляться при получении фокуса соответствующим пунктом главного меню с классном «main-item».
В итоге мы получим примерно такой css-код:


.sub-menu
{
display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}

Вот и все, никакой магии и javascript-а, только ловкость рук и css.

Демонстрация:

Эта реализация будет работать во всех современных веб-браузерах и в IE7+ (в IE6 не проверялось).

А теперь немного моментов на которые следует обратить внимание:

• псевдокласс :active используется для того, чтобы данная реализация работала в IE7;
• атрибут tabindex=’1′ используется для того, чтобы псевдокласс :focus корректно работал в браузерах на движке webkit;
• селектор .sub-menu:hover нужен для того, чтобы у нас была возможность щёлкнуть по ссылкам внутри выпавшего подменю и оно не спряталось в следствии того, что главный пункт потеряет фокус.