Here you are using a hidden checkbox, and showing the menu when it is "checked".
/*hide the inputs/checkmarks and submenu*/
input, ul.submenu {
display: none;
}
/*position the label*/
label {
position: relative;
display: block;
cursor: pointer;
}
/*show the submenu when input is checked*/
input:checked~ul.submenu {
display: block;
}
<input id="check01" type="checkbox" name="menu" />
<label for="check01">Menu</label>
<ul class="submenu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
Taken from this Codepen and simplified.
An alternative version using :focus
for @JanneAnnala
/*hide submenu*/
ul.submenu {
display: none;
}
/*show the submenu a in is focus*/
a:focus~ul.submenu {
display: block;
}
<a href="#">Menu</a>
<ul class="submenu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>