Closing hamburger menu from CSS - html

Question

I have a hamburger menu built in CSS but I need it to close when you click a link. It is only a 1 page site with anchor links. I have tried following other peoples problem with this but I cannot get it to work.
Navigation Links
<nav>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<ul>
<li>Services</li>
<li>About us</li>
<li>Portfolio</li>
<li><a href="/#reasons-to-choose-us">Reasons to choose us</a</li>
<li>Contact us</li>
</ul>
</nav>
CSS Desktop
nav {
float: right;
margin: 38px 0 34px 10px;
}
nav ul li {
display: inline;
}
nav ul {
clear: right;
}
nav li a {
padding: 28px 35px;
}
nav li a:focus {
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size:46px;
line-height: 70px;
float: right;
display: none;
}
#toggle {
display: none;
}
CSS Mobile
label {
display: block;
cursor: pointer;
padding-top: 7px;
}
nav li a {
padding: 15px;
display: block;
text-align: center;
border-bottom: 1px solid #eee;
}
nav {
float: none;
margin: 0;
}
nav ul li {
display: none;
}
nav ul li:hover {
background: #eee;
}
nav ul li a:focus {
background: #eee;
}
#toggle:checked + ul li {
display: block;
cursor: pointer;
}
Having limited coding experience, I am struggling a little with this one.
Thanks

Answer 1

answer to this question with jquery:
jsfiddle.net/a9013pLr
$(document).ready(function() {
$('#toggle').click(function() {
$('#ulul').toggleClass('open');
});
});
#media only screen and (max-width:1000px) {
label {
display: block;
cursor: pointer;
padding-top: 7px;
}
nav li a {
padding: 15px;
display: block;
text-align: center;
border-bottom: 1px solid #eee;
}
nav {
float: none;
margin: 0;
}
nav ul li {
display: none;
}
nav ul li:hover {
background: #eee;
}
nav ul li a:focus {
background: #eee;
}
#toggle {
display: block!important;
cursor: pointer;
}
}
.open {
display: none!important;
}
nav {
float: right;
margin: 38px 0 34px 10px;
}
nav ul li {
display: inline;
}
nav ul {
clear: right;
}
nav li a {
padding: 28px 35px;
}
nav li a:focus {
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size: 46px;
line-height: 70px;
float: right;
display: none;
}
#toggle {
display: none;
}
button {
width: 30px;
height: 30px;
background: green;
}
#ulul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<label for="toggle">☰</label>
<button id="toggle"></button>
<ul class="open" id="ulul">
<li>Services</li>
<li>About us</li>
<li>Portfolio</li>
<li>Reasons to choose us</li>
<li>Contact us</li>
</ul>
</nav>
Checkout This link for a better looking solution with explanation: https://www.w3schools.com/howto/howto_js_sidenav.asp