Dropdown nav pushing menu down - html

Question

Currently having a bit of a nightmare with my dropdown menu. When "hovering" over a menu item to view a submenu, the rest of my menu bar is being pushed down.
I have taken the hover out at the moment whilst debugging. Any advice would be great!
https://codepen.io/bradleyr/pen/JjGKZpB
/* CSS: */
.nav-switch {
display: none;
}
.main-menu {
text-align: center;
}
.main-menu ul {
list-style: none;
/* changes from here on */
position: relative;
/* text-align: center; */
}
.main-menu ul li {
display: inline-block;
z-index: 100;
}
.main-menu ul li a {
display: block;
text-transform: uppercase;
font-size: 14px;
color: #fff;
padding: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
}
.main-menu ul li img {
height: 7vh;
padding-left: 2vw;
padding-right: 2vw;
}
.main-menu ul li a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.main-menu ul li a:hover:after {
height: 3px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.main-menu ul li ul {
display: block;
position: relative;
}
.main-menu ul li ul li {
display: block;
/* float: left; */
}
.main-menu ul li ul li a {
font-size: 13px;
width: auto;
min-width: 100px;
/* margin-left: 20px;
margin-right: 20px; */
/* top | right | bottom | left */
}
.main-menu .noLine:hover:after {
opacity: 0;
}
<!-- HTML: -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
<nav class="main-menu">
<ul>
<li>Who We Are
<li>
What We Do
<ul class="dropdown">
<li>Brand Pop Ups</li>
<li>Weddings</li>
<li>Corporate Events</li>
<li>Festivals</li>
</ul>
</li>
<li>
How We Do It
<ul class="dropdown">
<li>Lighting</li>
<li>Sound</li>
<li>Video</li>
<li>Concept Design</li>
</ul>
</li>
<li>
<img src="/img/logo.svg" class="logoFlashB">
</li>
<!--<li>Venues</li>-->
<li>Case Studies</li>
<li><a href="#">Hire Stock
<li>Contact Us </li>
</ul>
</nav>
Many Thanks,
Brad!!
Example Images...
Broken
How it's supposed to look

Answer 1

Add flex configuration to your .main-menu ul to configure your desire output.
.main-menu ul {
list-style: none;
/* changes from here on */
position: relative;
/* text-align: center; */
display: flex; /* Add this line*/
justify-content: center; /* Add this line */
}
body {
background: black;
}
.nav-switch {
display: none;
}
.main-menu {
text-align: center;
}
.main-menu ul {
list-style: none;
/* changes from here on */
position: relative;
/* text-align: center; */
display: flex; /* Add this line*/
justify-content: center; /* Add this line */
}
.main-menu ul li {
display: inline-block;
z-index: 100;
}
.main-menu ul li a {
display: block;
text-transform: uppercase;
font-size: 14px;
color: #fff;
padding: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
}
.main-menu ul li img {
height: 7vh;
padding-left: 2vw;
padding-right: 2vw;
}
.main-menu ul li a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.main-menu ul li a:hover:after {
height: 3px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.main-menu ul li ul {
display: block;
position: relative;
}
.main-menu ul li ul li {
display: block;
/* float: left; */
}
.main-menu ul li ul li a {
font-size: 13px;
width: auto;
min-width: 100px;
/* margin-left: 20px;
margin-right: 20px; */
/* top | right | bottom | left */
}
.main-menu .noLine:hover:after {
opacity: 0;
}
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
<nav class="main-menu">
<ul>
<li>Who We Are
<li>
What We Do
<ul class="dropdown">
<li>Brand Pop Ups</li>
<li>Weddings</li>
<li>Corporate Events</li>
<li>Festivals</li>
</ul>
</li>
<li>
How We Do It
<ul class="dropdown">
<li>Lighting</li>
<li>Sound</li>
<li>Video</li>
<li>Concept Design</li>
</ul>
</li>
<li>
<img src="/img/logo.svg" class="logoFlashB">
</li>
<!--<li>Venues</li>-->
<li>Case Studies</li>
<li><a href="#">Hire Stock
<li>Contact Us </li>
</ul>
</nav>