Dropdown menu with checkbox hack doesn't work

Question

I'm trying to create a dropdown menu when clicking the 'menu' word, but it just doesn't work. The content is already hidden with display:none, I have used the :checked pseudo-class and everything. Any help is welcome. Thanks in advance!

The code can also be checked on JSFiddle: https://jsfiddle.net/pys0wLo3/

HTML:

<div class="menu" style="text-align: center;">
  <input type="checkbox" id="toggle">    
  <label for="toggle">MENU ☰</label>
  <ul>
        <a href="#"><li>Página principal</li></a>
        <a href="#"><li>Textos</li></a>
        <ul>
              <a href="#"><li>VAVEL Brasil</li></a>
              <a href="#"><li>Doislances</li></a>
              <a href="#"><li>Outros</li></a>
        </ul>
        <a href="sobre.html"><li>Sobre mim</li></a>
         <a href="#"><li>Contato</li></a>
  </ul>

CSS:

.menu {
    height:60px;
    background-color:#272F38;
}

.menu label {
    display:inline;
    font-family: "Lato Bold";
    font-size:16px;
    color:#767676;
    font-weight: bold;
    cursor: pointer;
    width:100%;
}

.menu input {
    position: absolute;
    left: -9999px;
}

.menu ul {
    display:none
}

#toggle:checked ~ .menu ul {
    display:block;
    font-size:20px;
    font-family:"Lato Bold";
    font-weight: bold;
    color:black;
}

Answer 1

In your code, what the below segment means that

#toggle:checked ~ .menu ul {}

 

<input checked>
<tag class="menu">
 <ul></ul> <!-- the above css will select this when you check the input -->
</tag>

I've made a minor modification to your fiddle. Please check this. https://jsfiddle.net/cujslive/dy3pqcja/1/

Answer 2

#toggle:checked ~ ul

there isn't sibling .menu at #toggle