trying to achieve multi level menu that is using flexbox - html

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>Home</li>
<li>Topics
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</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>Home</li>
<li class="dd-parent">Topics
<ul class="dd-list">
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>