Drop down menu using checkbox

DEMO : http://codepen.io/revivifier/pen/oLqEx

Set max-height: 0 and overflow: hidden for nav.

nav { max-height: 0; overflow: hidden; transition: all .2s linear; }</pre></code>

Here when max-height is set to 0 the nav become hidden.

Now to display the nav max-height need to be toggled to 500px. So when the checkbox is checked nav is displayed.
input:checked ~ nav { max-height: 500px; }</pre></code>