css & html :checked property

CSS:

nav a{
    display: none;
}


#menubutton:checked, nav a{
    display: block;
    color: black;
    text-decoration: none;
}

HTML:

<nav>
<a href="#" id="closenav"><img src="pictures/close.png" alt="Close"  height="20" width="20"></a>
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>

I want that the HTML code isn't displaied until the #menubutton is checked. (The #menubutton is a invisible checkbox). If the #menubutton is checked I want, that the HTML code is displaied. The code who should be displaied is in the css "nav a{}".