title: Flexbox Nav Dropdown Not Under Container
body: <p>I am trying to use a flexbox nav menu with dropdowns for some menus. For some reason, on hover, the dropdown lists are showing up to the right of the container I am hovering on. I would like for them to show below, like a normal nav menu. </p>
  
  <p>Here is a codepen:
  <a href="http://codepen.io/anon/pen/XbmaBY" rel="nofollow">http://codepen.io/anon/pen/XbmaBY</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="nav"&gt;
    &lt;ul class="nav-flex"&gt;
      &lt;li class="nav-brand-flex"&gt;
        &lt;a href=""&gt;&lt;img src="img.png" \&gt;&lt;/a&gt;
      &lt;/li&gt;
         &lt;li class="nav-link-flex nav-flex-dropdown"&gt;
         &lt;a href=""&gt;Dropdown 1&lt;/a&gt;
         &lt;div&gt;
           &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-link-flex nav-flex-dropdown"&gt;
         &lt;a href=""&gt;Dropdown 2&lt;/a&gt;
        &lt;div&gt;
           &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-link-flex"&gt;
        &lt;a href=""&gt;Regular 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-link-flex"&gt;
        &lt;a href=""&gt;Regular 2&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-link-flex"&gt;
        &lt;a href=""&gt;Regular 3&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Sass:</p>
  
  <pre><code>.nav-flex {
      display: flex;
      list-style-type: none;
      padding: 0;
      background-color: #58575f;
  
      li {
          justify-content: center;
  
          a {
              align-self: center;
              color: white;
              font-weight: 300;
              font-family: 'Open Sans', sans-serif;
              letter-spacing: .4px;
          }
      }
  
      @media (max-width: 760px) {
          padding-top: 0;
          flex-wrap: nowrap;
          -webkit-flex-wrap: nowrap;
          flex-direction: column;
          -webkit-flex-direction: column;
          background-color: #f6f6f6;
      }
  }
  
  .nav-link-flex {
      display: flex;
      padding: 0 12.5px;
      position: relative;
  
      @media (max-width: 760px) {
          width: 90%;
          background-color: #494949;
          border-radius: 20px;
          margin-bottom: 10px;
          margin-left: auto;
          margin-right: auto;
          font-size: 22px;
          padding: 10px;
      }
  
      &amp;:hover {
          background-color: white;
  
          a {
              color: black;
              text-decoration: none;
  
              &amp;+ div {
                  display: block;
              }
          }
      }
  
      a {
  
          &amp;+ div {
              border-radius: 0 0 2px 2px;
              box-shadow: 0 3px 1px rgba(0,0,0,.05);
              display: none;
              font-size: 1rem;
              position: absolute;
              width: 195px;
          }
      }
  }
  
  .nav-brand-flex {
      margin-right: auto; 
      display: flex;  
      padding: 5px 0;    
  
      a {
          display: flex;
          img {
  
              height: 35px;
              align-self: center;
          } 
      }
  
      @media (max-width: 760px) {
          margin: 0;
          background-color: #494949;
          width: 100%;
          border-radius: 0;
          font-size: 36px;
          padding: 10px 0;
          margin-bottom: 10px;
      }
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated, because I cannot figure out why they are going to the right instead of below.</p>