html - 试图实现使用 flexbox 的多级菜单

Question

我正在尝试创建一个水平导航栏，左侧带有徽标，右侧带有菜单项。我可以找到这个的基本设置，但我找不到的是如何从一些父链接中创建子菜单:(这是我到目前为止所拥有的，我有点新 - 所以，如果可以的话，请温柔的k :)

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: green;
}

header {
  height: 100px;
  background-color: white;
  padding: 10px 0;
}

.menu-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

.logo-img {
  height: 79px;
}

.menu-icon {
  font-size: 2.4em;
  color: #ffffff;
  line-height: 50px;
}

nav {
  position: absolute;
  background-color: #3D4852;
  top: 70px;
  left: 0;
  width: 100%;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  padding: 0 15px;
}

nav ul li a {
  display: inline-block;
  padding: 12px;
  /* Add your custom styles below to change appearance of links */
  color: black;
  text-decoration: none;
  letter-spacing: 0.05em;
}

nav ul li a:hover,
nav ul li a:focus {
  color: #eb6f4a;
}

nav ul li a:hover,
nav ul li a:focus {
  color: #eb6f4a;
}

#checkbox {
  display: none;
}

#checkbox:checked~nav ul {
  max-height: 200px;
  padding: 15px 0;
  transition: all 0.5s;
}

@media (min-width: 768px) {
  .menu-icon {
    display: none;
  }
  nav {
    position: relative;
    top: -10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }

<header class="menu">
  <div class="menu-wrap">
    <img src="logoHOLD.gif" class="logo-img" alt="Logo">
    <input type="checkbox" id="checkbox">
    <label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Topics</a>
          <ul>
            <li><a href="#">Item One</a>
              <li><a href="#">Item Two</a>
                <li><a href="#">Item Three</a>
          </ul>
          </li>
          <li><a href="#">Commentaries</a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Something</a></li>
      </ul>
    </nav>
  </div>
</header>

标签： htmlcssflexbox

Answer 1

您需要做的是为父 ul 分配一个类或 id，该父 ul 具有您想要显示为下拉列表的另一个 ul，并给它一个相对位置。然后，给孩子 ul（下拉元素）绝对定位并使用 transform / top / opacity 值。这是一种方法。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: green;
}

header {
  height: 100px;
  background-color: white;
  padding: 10px 0;
}

.menu-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

.logo-img {
  height: 79px;
}

.menu-icon {
  font-size: 2.4em;
  color: #ffffff;
  line-height: 50px;
}

nav {
  position: absolute;
  background-color: #3D4852;
  top: 70px;
  left: 0;
  width: 100%;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  padding: 0 15px;
}

nav ul li a {
  display: inline-block;
  padding: 12px;
  /* Add your custom styles below to change appearance of links */
  color: black;
  text-decoration: none;
  letter-spacing: 0.05em;
}

nav ul li a:hover,
nav ul li a:focus {
  color: #eb6f4a;
}

nav ul li a:hover,
nav ul li a:focus {
  color: #eb6f4a;
}

#checkbox {
  display: none;
}

#checkbox:checked~nav ul {
  max-height: 200px;
  padding: 15px 0;
  transition: all 0.5s;
}

@media (min-width: 768px) {
  .menu-icon {
    display: none;
  }
  nav {
    position: relative;
    top: -10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
  
  
  
  .dd-parent {
    position: relative;
  }
  
  .dd-list {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    transform: scaleY(0);
    opacity: 0;
    transition: .3s all ease;
    transform-origin: top;
    
  }
  
  .dd-list li {
    text-align: left;
    background: DarkOrchid;
    color: white;
  }
  
  .dd-list li:not(:first-of-type) {
    border-top: 2px solid black;
  }
  
  .dd-parent:hover > .dd-list {
    transform: none;
    opacity: 1;
  }

<header class="menu">
  <div class="menu-wrap">
    <img src="logoHOLD.gif" class="logo-img" alt="Logo">
    <input type="checkbox" id="checkbox">
    <label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li class="dd-parent"><a href="#">Topics</a>
          <ul class="dd-list">
            <li><a href="#">Item One</a>
              <li><a href="#">Item Two</a>
                <li><a href="#">Item Three</a>
          </ul>
          </li>
          <li><a href="#">Commentaries</a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Something</a></li>
      </ul>
    </nav>
  </div>
</header>