Создание выпадающего меню с использованием только CSS и недокументированных возможностей элемента флажка

Демонстрация работы выпадающего меню с использованием только CSS и недокументированных возможностей элемента флажка, адаптация примера из урока Danny Markov, специально для сайта dejurka.ru

HTML

<div class="dropdown">
    <input type="checkbox" id="checkbox-toggle">
    <label for="checkbox-toggle">Нажмите, чтобы развернуть</label>
    <ul>
        <li><a href="#">Первая ссылка</a></li>
        <li><a href="#">Вторая ссылка</a></li>
        <li><a href="#">Третья ссылка</a></li>
        <li><a href="#">Четвертая ссылка</a></li>
    </ul>
</div>

CSS

body{
    text-align: center;
    font: 16px/1.5 sans-serif;
    padding-top: 40px;
    background-color: #ECEFF1;
}

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
}

/**
    Спрячем сам флажок. Его установка и снятие будут происходить с помощью элемента подписи.
*/

input[type=checkbox]{
    display: none;
}


/* Кнопка «Нажмите, чтобы развернуть» */

label{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: #57A0D4;
    padding: 15px 20px;

    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*  Ненумерованный список будет спрятан по умолчанию */

ul{
    position: absolute;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    margin:0;
    padding:0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    display: none;
}


ul li{
    padding: 15px;
    background-color: #fff;
    color: #4FB9A7;
    margin-bottom: 1px;
    cursor: pointer;
}

ul li:hover{
    background-color: #4FB9A7;
    color: #FFF;
}

ul li a{
    color: inherit;
    text-decoration: none;
}


/**

    Используя родственный селектор ~, можно обращаться к элементам, расположенным за элементом флажка в дереве объектов документа.
    Используя псевдокласс :checked, можно задавать изменения в зависимости от состояния элемента флажка.
    Используя вместе родственный селектор ~ и псевдокласс :checked, можно изменять цвет подписи и показывать элементы списка, только если установлен флажок.

*/

input[type=checkbox]:checked ~ label {
    background-color: #3D88BD;
}


input[type=checkbox]:checked ~ ul {
    display: block;
}