trying to achieve multi level menu that is using flexbox

Question

I am trying to create a horizontal navbar with a logo on the left and the menu items on the right of the navbar. I can find the basic setup for this, but what I cannot find is how to create sub menus off of some of the parent links :( here is what I have so far, I am kinda new - so please, if you can, be gentle 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>

Answer 1

What you'll need to do is assign a class or id to the parent ul that has the other ul you want to appear as a dropdown and give it a relative position. Then, give the child ul (the dropdown element) absolute positioning and play around with transform / top / opacity values. That's one way to do it.

* {
  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>