html - flex 导航栏中的下拉子菜单不会出现在按钮下

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>

标签： htmlcssflexbox

Answer 1

您可以将position: relativefor parent（子菜单触发器）与position: absolutefor child（子菜单）结合使用。我还删除了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>