Close CSS Menu on click - css

Question

I have a pure CSS drop down menu that I would like to close when the user clicks an item in the menu.
Please resize the browser to under 768 px because that is when the drop down appears.
This is the site
Here is my code:
<div class="nav">
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle" onclick></label>
<ul class="menu">
<li>Creative Services</li>
<li>Updates</li>
<li>Contact</li>
</ul>
</div><!-- End of Navigation -->
and here is my css
#media only screen and (max-width: 768px){
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.menu > li { display: block; width: 100%; margin: 0; }
.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#toggle:checked ~ .menu { display: block; opacity: 1;}
}
.toggle:after {
content: '☰';
display: block;
width: 100px;
margin: 33px 0;
padding: 10px 50px;
text-align: center;
font-size: 20px;
color: blue;
box-sizing: border-box;
}
.toggle:hover:after{
color: red;
}
.toggle:active:after{
color: blue;
}
#toggle:checked + .toggle:after{
content: '☰';
}
}

Answer 1

Ok, to do this with jquery (which I saw you already have on your page..):
$(function () {
$('.menu').find('a').on('click', closeNav);
});
function closeNav() {
jQuery("#toggle").attr('checked', false);
}