title: Responsive dropdown navigation using css flexbox and no jquery
body: <p>I am building a responsive menu with dropdowns using only css and no jQuery. 
  New to flexbox and struggling to get the dropdown aligned correctly. The following code works except for the dropdown stuff which will be misaligned - tried with standard stuff like position:relative.</p>
  
  <p>I am using a checkbox (<code>.toggle</code>) to show/hide the hamburger.
  Hoping for some pointers.</p>
  
  <p>Here is my code: (also <a href="https://jsfiddle.net/jqst7wbo/2/" rel="nofollow noreferrer">JSFiddle here</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  nav {
        margin:0 auto;
        max-width:700px;
        width:100%;
      }
      
      .menu {background:#28303a;padding:0;margin:0;max-width:700px;height:50px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        list-style-type: none; 
      }
      
      .menu li a {padding:10px;border-radius:5px;align-self:center;}
      .menu li a:hover { background: #0093bb;}
      
      #checkbox1,.toggle { display: none;}
      
      /* handle smaller screens here */
      @media screen and (max-width: 550px) {
      
        .menu {
          flex-direction: column;
          height: 0px;
        }
        .menu li {
          display: flex;
          align-self: center;
          width:100%;
           /* hide until user clicks on hamburger */
          opacity: 0;
          visibility: hidden;
        }
        .menu li a {
          width: 100%;
          text-align: center;
          align-self: center;
          align-content: center;
        }
      
      .toggle {
          color:#fff;
          clear: both;
          display: block;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
          width: 100%;
          height: 40px;
        }
        
        .toggle:hover {
          background: #0093bb;
        }
        #checkbox1:checked + label .menu li {
          /* show menu - user clicked on hamburger */
          opacity: 1;
          visibility: visible;
        }
      
        #checkbox1:checked + label .menu {
          height: 200px;
        }
      }
      
      
      /* standard */
      body {font-family: 'Open Sans';font-size:15px}
      a{text-decoration:none;color:#fff}
      .container {background:#28303a;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
         &lt;nav&gt;
         &lt;input type="checkbox" id="checkbox1" /&gt;
         &lt;label for="checkbox1"&gt;
         
         &lt;ul class="menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub items 1&lt;/a&gt;
            &lt;!-- sub items below / this won't work:
               &lt;ul class="menu"&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Sub 1a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 1b&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
            --&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sub items 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
     
         &lt;span class="toggle"&gt;☰&lt;/span&gt;
         
         &lt;/label&gt;
         &lt;/nav&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong>: This is the code I finally got working. Tested in Edge, Chrome (pc/mobile), Firefox, IE 10-11 (below IE10 --> good luck :).
  In addition to updated CSS, I moved the whole <code>&lt;ul class="menu"&gt;</code> stuff outside of the <code>&lt;label for...&gt;</code> as the old code was not W3C compliant.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* standard */
   body {font-family: 'Open Sans';font-size:15px}
   a {text-decoration:none;color:#fff}
  
  /* code for responsive css dropdown starts here: */
  .container {
      background: #28303a;
      padding-bottom: 10px;
      display: flex;
      justify-content: center;
  }
  
  nav {
      box-sizing: border-box;
      background: #28303a;
      margin: 0;
      padding: 0;
  }
  
      nav label {
          padding: 0;
          margin: 0
      }
  
      nav ul {
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: row;
      }
  
      nav li {
          list-style-type: none;
          padding:0 10px;
          margin:0;
          font-size:16px;
          line-height:16px;
      }
  
      nav a, #checkbox1, .toggle {
          font-size: 16px;
          color: #fff;
          width: 100%;
          display: block;
          line-height: 16px;
      }
  
      /* hide sub menu initially */
      nav &gt; ul &gt; li ul {
          display: none;
      }
  
      /* show sub menu on parent hover */
      nav &gt; ul &gt; li:hover ul {
          display: block;
          background: #28303a
      }
  
      /* position sub menu */
      ul ul {
          position: absolute;
      }
  
      ul ul &gt; li {
          padding: 5px 8px;
      }
  
  /* toggle button hidden initially */
      #checkbox1, .toggle {
          display:none; 
      }
  
  @media screen and (max-width:768px) {
      
      nav {
          width: 100%
      }
  
      nav ul {
          flex-direction: column;
      }
  
      nav &gt; ul &gt; li {
          justify-content: center;
          text-align: center;
          align-items: center;
          align-content: center;
          width: 100%;
          padding:0;
          height:0; /* set height to 0 so the menu won't take up space, until toggle=open*/
          opacity:0;
          visibility: hidden;
      }
  
      /* position sub menu */
      ul ul {
          position: relative
      }
      /* remove padding from sub menu items */
      ul ul &gt; li {
          padding:0;
      }
  
      /* set padding for all a elements */
      nav a {
          padding: 3px 0;
      }
  
      nav a:hover {
          background: #0093bb;
      }
  
      .toggle {
          color: #fff;
          clear: both;
          display: block;
          text-align: center;
          cursor: pointer;
          width: 100%;
          padding: 0;
          margin: 0;
      }
  
      .toggle:hover {
          background: #0093bb;
      }
  
      /* show menu - user clicked on hamburger */
      #checkbox1:checked + label + ul.menu &gt; li {
          opacity: 1;
          visibility: visible;
          height: auto;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
             &lt;nav&gt;
             &lt;input type="checkbox" id="checkbox1" /&gt;
             &lt;label for="checkbox1"&gt;&lt;span class="toggle"&gt;&amp;equiv;&lt;/span&gt;&lt;/label&gt;
             
             &lt;ul class="menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub items 1&lt;/a&gt;
                &lt;ul&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Sub 1a&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub 1b&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub items 2&lt;/a&gt;
                &lt;ul&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Sub 2a&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub 2b&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub 3c&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;/nav&gt;
       &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>