<div class="menu--container">
    <input id="menu" class="menu--toggle" type="checkbox">
    <label for="menu" class="menu--toggle--text">Menu</label>
    <div class="menu--body">
      <ul class="menu--list">
        <li><a href="#1">Link 1</a></li>
        <li><a href="#2">Link 2</a></li>
        <li><a href="#3">Link 3</a></li>
        <li><a href="#4">Link 4</a></li>
      </ul>
    </div>
  </div>

  .menu--toggle,
    .menu--body {
      display: none;
    }
/* The trick,display the item when the menu label is on */
    .menu--toggle:checked ~ .menu--body {
      display: block;
    }
/* other styling */

.menu--toggle--text {
      display: block;
      padding: 16px;
      margin: 0 auto;
      cursor: pointer;
      background-color: #000;
      color: #fff;
      user-select: none;
   }
.menu--list {
  list-style: none;
  background-color: #ccc;
  padding: 16px;
}
.menu--list li {
  margin: 5px;
}
a {
  text-decoration: none;
  color: #FFF;
}
a:hover {
  color: #000;
  text-decoration: underline;
}