<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>