NoJS Responsive Nav

Responsive navigation for mobile and desktop without using JS. A little hacky on the page structure.

HTML

<div class="pretendthisisthebody">
  <div id="hideholder">
    <input type="radio" name="level1" id="menuhide" />
    <input type="radio" name="level2" id="level2hide" />
  </div>
  <nav class="radionav">
  <div>
  Above content
  </div>
    <input type="radio" name="level1" id="menushow" />
    <label class="opener" for="menushow">Menu</label>
    <label class="closer" for="menuhide">X</label>
    <ul>
      <li><a href="#">Menu item 0</a></li>
      <li>
        <input type="radio" name="level2" id="item1show" />
        <label class="opener" for="item1show">Menu item 1</label>
        <label class="closer" for="level2hide">Menu item 1</label>
        <ul>
          <li><a href="#">Just a link</a></li>
          <li><a href="#">Just a longer link</a></li>
          <li><a href="#">Just a link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li>
        <input type="radio" name="level2" id="item4show" />
        <label class="opener" for="item4show">Menu item 4</label>
        <label class="closer" for="level2hide">Menu item 4</label>
        <ul>
          <li><a href="#">Just a link</a></li>
          <li><a href="#">Just a longer link</a></li>
          <li><a href="#">Just a link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 5</a></li>
    </ul>
  </nav>

  <label for="menuhide">
    <h1>Clicking in the body outside the menu will hide it</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam suscipit. Vivamus ac mi tellus. Donec vulputate sem eu justo ornare, at mattis augue tempor. Nullam fringilla odio lobortis bibendum lobortis. Fusce condimentum ultricies
      nulla, non posuere sem vestibulum nec. Duis rhoncus velit lobortis odio interdum, quis aliquam ex dapibus. Quisque hendrerit pellentesque turpis non pretium. Nam ante metus, tempus quis tortor lacinia, efficitur ullamcorper erat. Sed at aliquet
      nisi, ac...

CSS

html,
body {
  height: 100%;
  width: 100%;
  background: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

p {
  padding: 1.6em 0 0;
}

/* Below is compressed menu */
.pretendthisisthebody {
  padding: 50px 10px 0;
}

#hideholder {
  display: none;
}

.radionav {
  position: absolute;
  top: 0;
  left: 0;
  background: #f8f8f8;
  width: 100%;
}

.radionav>label {
  text-align: center;
  text-transform: uppercase;
}

/* Menu label, bar and click link*/
.radionav label,
.radionav a {
  color: #505050;
  display: block;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: 0.1s all ease-in-out;
}

.radionav li:hover>label,
.radionav a:hover {
  background: #cc0000;
  color: #fff;
}

.radionav ul {
  list-style-type: none;
  background: #f8f8f8;
}

/*ul{
   width: 100%;
   display: table;
   text-align: center;
}

ul li{
     display: inline-block;
     float: none;
}*/

.radionav ul ul a {
  padding-left: 0px;
}

.radionav input,
.radionav .closer,
.radionav ul,
.radionav input:checked ~ .opener {
  display: none;
}

.radionav input:checked ~ ul,
.radionav input:checked ~ .closer {
  display: block;
}

.radionav .opener::after {
  content: " +";
}

.radionav .closer::after {
  content: " -";
}

/* Below is expanded menu */
@media all and (min-width: 481px) {

  /* Hide menu label */
  .radionav>label {
    display: none !important;
  }
  .radionav>ul
  {
    width: 100%;
    display: table;
    text-align: center;
  }
  .radionav>ul>li {
    display: inline-block;
    float: none;
  }
  .radionav a,
  .radionav label {
    width: auto;
  }
  .radionav li {
    position: relative;
  }
  .radionav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
  }
  .radionav ul ul li {
    display: block;
    min-width: 100%;
  }
  .radionav ul ul a {
    padding-left: 10px;
    white-space: nowrap;
  }
  .radionav input:checked ~ ul {
    display: none;
  }
  .radionav li:hover>ul {
    display: block;
  }
 ...