title: Dropdown submenu in flex nav bar doesn't apper under button
body: <p>I'm trying to make an responsive navigation menu at top of my website. I'm using for that <code>display: flex;</code> . It works fine for mobile, so I will skip that part, but on desktop submenu appears on the right side of my dropdown-button. How schould I make this submenu drop down to my navigation bar?</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>* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  #top-bar {
    width: 100%;
    height: 70px;
    background-color: white;
    z-index: 1;
  }
  
  #top-bar nav {
    height: 70px;
  }
  
  #nav-buttons {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: hidden;
    height: 0px;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  
  nav #nav-buttons li {
    list-style-type: none;
    width: 100%;
    background-color: black;
  }
  
  nav #nav-buttons li a {
    display: block;
    width: 100%;
    line-height: 10.5vh;
    text-align: center;
    text-decoration: none;
    color: white;
  }
  
  .dropdown {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  
  .dropdown-sub {
    display: none;
    z-index: 1;
    flex-direction: column;
  }
  
  @media only screen and (min-width: 20px) {/*768px ofc*/
    /*=======Top bar for desktop======*/
    #nav-buttons {
      overflow: hidden;
    }
    #top-bar nav {
      width: 75%;
      float: right;
    }
    #top-bar nav #nav-buttons {
      height: 70px;
      flex-direction: row;
      justify-content: space-evenly;
    }
    nav #nav-buttons li {
      background-color: white;
    }
    nav #nav-buttons li a {
      color: black;
      line-height: 70px;
    }
    nav #nav-buttons li a:hover {
      color: red;
      transition: 0.45s;
    }
    .dropdown-title:hover+.dropdown-sub,
    .dropdown-sub:hover {
      cursor: pointer;
      display: flex;
    }
    .dropdown-title:hover+.dropdown-option:hover {
      background-color: #aaaaaa;
    }
    /*=======Top bar for desktop======*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="top-bar"&gt;
    &lt;nav&gt;
      &lt;ul id="nav-buttons"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
        &lt;li class="dropdown" style="background-color:#aaa;"&gt;
          &lt;a class="dropdown-title"&gt;Sub menu&lt;/a&gt;
          &lt;ul class="dropdown-sub"&gt;
            &lt;li class="dropdown-option"&gt;option 1&lt;/li&gt;
            &lt;li class="dropdown-option"&gt;option 2&lt;/li&gt;
            &lt;li class="dropdown-option"&gt;option 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>