When I click on the checkbox only a ul tag become visible on the screen

I don't understand why when I click on the checkbox, on the screen are visible only ul tag with id=menu and not id=social. I need to set display:block in 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">&#9776;</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>