Background
I am designing a menu for mobile devices, and trying to avoid JS entirely. I'm using the checkbox hack to show and hide the menu, and that is working.
Problem
I want the menu to hide when a link is clicked. Right now this doesn't work.
Current Code
.toggle + a, .menu {
display:none;
z-index:10;
}
.toggle {
display:block;
padding:0 20px;
font-size:20px;
line-height:20px;
text-decoration:none;
border:none;
padding:none;
}
.toggle img {
width:5%;
float:right;
padding:0;
}
[id ^= drop]:checked + ul {
display: block;
}
ul {
width:100%;
}
ul li {
display:block;
width:50%;
margin-left:50%;
border-bottom:1px solid rgba(63, 63, 63, 1);
background:gray;
}
li:hover a {
border-bottom:none;
transform:none;
}
ul li a {
width:90%;
text-align:right;
}
<div id="nav">
<label for="drop" class="toggle"><img src="images/menu_icon.png" alt="logo" /></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#design">Design</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#terms">Terms</a></li>
<li><a href="#gallery">Gallery</a></li>
</ul>
</div>