using + with > selector - css

Question

I am learning responsive menus and by googling, i got the hamburger checkbox hack.
What i am trying to do is show only direct descendants by clicking the hamburger and hide the sub menus.
#toggle-menu {
cursor: pointer;
}
#primary-nav,
#menu-toggle,
#primary-nav>ul {
display: none;
}
#menu-toggle:checked+#primary-nav {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle">
<ul id="primary-nav">
<li>home</li>
<li>dropdown
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
Any help will be appreciated

Answer 1

To only show the ul after the input, you need to hide all uls, then only show the ul directly after a checked input
You can then add a class on all the inputs and do the same for the submenu.
#toggle-menu {
cursor: pointer;
}
.toggler, /*checkboxes a class of toggler and hide */
ul { /* hide all menus (you may want to give them all a class) */
display: none;
}
.toggler:checked+ul { /* only show a ul if it is directly after a checked toggler input */
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle" class="toggler">
<ul id="primary-nav">
<li>home</li>
<li>
<label for="sub-menu1">dropdown</label> <!-- use a label and target the checkbox below -->
<input type="checkbox" class="toggler" id="sub-menu1"> <!-- add this -->
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>