Get state for dropdown menu with :focus

by Alexander Zonov

HTML

<!-- Attension on tabindex="-1" that give focus for any html tag -->

<div class="wrapper" tabindex="-1">
<div class="holder" tabindex="-1">
    CLICK
    <div class="menu">
    </div>
</div>
</div>

CSS

.wrapper {
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.holder {
    width: 100px;
    height: 60px;
    background-color: gray;
    position: relative;
    color: white;
    padding-top: 40px;
    text-align: center;
    cursor: pointer;
    pointer-events: none; /* IMPORTANT */
}

.wrapper:focus .holder {
    pointer-events: auto; /* IMPORTANT */
}

.menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    background-color: blue;
}

.wrapper:focus .menu{
    height: 100px;
}

.holder:focus .menu{
    height: 0px;
}