Use radio buttons and sibling selectors (fiddle here)

This differs from checkboxes in that it will automatically close the open menu item when a different one is clicked.

   <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;
}