flex box responsive

by rdenver6

HTML

<nav role="navigation" id="nav">
  <input class="trigger" type="checkbox" id="mainNavButton">
  <label for="mainNavButton" onclick>Menu</label>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
      <ul>
        <li><a href="#">Sub Nav Item</a></li>
        <li><a href="#">Sub Nav Item</a>
          <ul>
            <li><a href="#">Sub Sub Nav Item</a></li>
            <li><a href="#">Sub Sub Nav Item</a></li>
            <li><a href="#">Sub Sub Nav Item</a></li>
            <li><a href="#">Sub Sub Nav Item</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Nav Item</a></li>
        <li><a href="#">Sub Nav Item</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Specials</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  </ul>
</nav>

<h1>Responsive Flexbox Nav with :checked hack</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, dignissimos, distinctio consequatur eos optio recusandae maiores quidem possimus tempora esse reiciendis velit ut consequuntur architecto hic soluta deleniti fugit explicabo.</p>

CSS

body {
  margin: 25px;
  -webkit-animation: bugfix infinite 1s;
  /* needed for checkbox hack */
  background: #021320;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}


/* needed for checkbox hack */

h1,
p {
  color: white;
}

#nav {
  position: relative;
}

#nav ul {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#nav ul li a {
  display: block;
  padding: 1em;
  background: #0F9962;
  color: white;
  text-decoration: none;
  border-right: 1px solid #0a6b44;
}

#nav ul li a:hover {
  background: #0d8253;
}

#nav ul li:last-of-type a {
  border-right: 0px;
}

#nav ul li ul li a {
  padding-left: 1.5em;
}

#nav ul li ul li ul li a {
  padding-left: 3.125em;
}

#nav input.trigger {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

#nav input.trigger:checked ~ ul,
#nav input.trigger:checked ~ ul li ul {
  display: block !important;
}

@media (min-width: 48em) {
  #nav input.trigger:checked ~ ul,
  #nav input.trigger:checked ~ ul li ul {
    /* older flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
}

#nav label {
  position: relative;
  display: block;
  min-height: 2em;
  padding: .45em;
  font-size: 1.1em;
  margin: 0;
  cursor: pointer;
  background: #005292;
  line-height: 2em;
  color: #bfe1fb;
}

#nav label:after {
  position: absolute;
  right: 1em;
  top: .2em;
  content: "\2261";
  font-size: 1.8em;
  color: white;
}

@media (min-width: 48em) {
  #nav ul {
    /* older flexbox */
    display: -ms-flexbox;
    flex-direction: -ms-row;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
  #nav ul...