Подменю выпадающего меню в панели Flex Nav не появляется под кнопкой

Question

Я пытаюсь сделать адаптивное меню навигации вверху моего сайта. Я использую для этого display: flex;. Он отлично работает для мобильных устройств, поэтому я пропущу эту часть, но в правой части моего выпадающего меню появится подменю рабочего стола. Как мне сделать, чтобы это подменю выпало на панель навигации?

* {
  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======*/
}

<div id="top-bar">
  <nav>
    <ul id="nav-buttons">
      <li><a href="#">Menu</a></li>
      <li class="dropdown" style="background-color:#aaa;">
        <a class="dropdown-title">Sub menu</a>
        <ul class="dropdown-sub">
          <li class="dropdown-option">option 1</li>
          <li class="dropdown-option">option 2</li>
          <li class="dropdown-option">option 3</li>
        </ul>
      </li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  </nav>
</div>

Answer 1

Вы можете использовать position: relative для родителя (триггер подменю) в сочетании с position: absolute для дочернего (подменю). Я также удалил свойство overflow: hidden и заменил его на overflow: visible.

* {
  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: visible;
  }
  #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;
  }
  .dropdown {
    position: relative;
  }
  .dropdown-sub {
    position: absolute;
    top: 100%;
    left: 0;
  }
  /*=======Top bar for desktop======*/
}

<div id="top-bar">
  <nav>
    <ul id="nav-buttons">
      <li><a href="#">Menu</a></li>
      <li class="dropdown" style="background-color:#aaa;">
        <a class="dropdown-title">Sub menu</a>
        <ul class="dropdown-sub">
          <li class="dropdown-option">option 1</li>
          <li class="dropdown-option">option 2</li>
          <li class="dropdown-option">option 3</li>
        </ul>
      </li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  </nav>
</div>