NoJS Drop Menu

by Freer Hall

HTML

<ul class="menu">
        <li>
            <input type="radio" name="menuopt" id="drop1" />
            <label class="opener" for="drop1">Parent item 1</label>
            <label class="closer" for="dropclose">Parent item 1</label>
            <ul>
                <li><a href="">Menu item 1</a></li>
                <li><a href="">Menu item 2</a></li>
                <li><a href="">Menu item 3</a></li>
            </ul>
        </li>
        <li>
            <input type="radio" name="menuopt" id="drop2" />
            <label class="opener" for="drop2">Parent item 2</label>
            <label class="closer" for="dropclose">Parent item 2</label>
            <ul>
                <li><a href="">Menu item 1</a></li>
                <li><a href="">Menu item 2</a></li>
                <li><a href="">Menu item 3</a></li>
                <li><a href="">Menu item 4</a></li>
                <li><a href="">Menu item 5</a></li>
            </ul>
            <input type="radio" name="menuopt" id="dropclose" />
        </li>
    </ul>

CSS

.menu ul, 
    .menu input, 
    .menu .closer, 
    .menu input:checked ~ .opener{
        display:none;
    }
    .menu input:checked ~ ul,
    .menu input:checked ~ .closer{
        display:block;
    }