Cкрытый текст по щелчку мыши на CSS

Много раз видел на разных форумах, конструкцию, которая скрывает дополнительный (а иногда, равно и не нужный для всеобщего обозрения) блок с ссылками. Не знаю, как они это реализовывают, но я нашёл простой способ. Для осуществления нашего замысла мы воспользуемся вот такой HTML разметкой:
<label for="menu-toggle">
Нажмите для открытия блока ссылок.
</label>
<input type="checkbox" id="menu-toggle"/> <ul id="menu">
<li><a href="http://shilgen.ru">Первая ссылка</a></li> <li><a href="http://shilgen.ru">Вторая ссылка</a></li> <li><a href="http://shilgen.ru">Третья ссылка</a></li> </ul>

А код CSS выглядит так:
label {  cursor: pointer;}
#menu-toggle { display: none; }
#menu { display: none;}
#menu-toggle:checked + #menu { display: block;}

Демо-версия: тут
11 июля 2014, 18:04