It's puzzling to me that when I click on the checkbox, only the ul tag with id=menu is visible on the screen, not id=social. I need to ensure display:block is set for every ul tag.
.show-menu {
display:block;
}
#menu{
float:left;
}
#social{
float:right;
}
ul {
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
input[type=checkbox]:checked #social{
display: block;
}<label for="show-menu" class="show-menu">☰</label>
<input type="checkbox" id="show-menu" role="button"/>
<ul id="menu">
<li><a href="home.php">Home</a></li>
<li><a href="news.php">News</a></li>
<li><a href="about.php">About</a></li>
</ul>
<div>
<ul id="social">
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
</ul>
</div>