Dropdown nav pushing menu down

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><a href="#">Who We Are</a>
      <li>
        <a href="#">What We Do</a>
        <ul class="dropdown">
          <li><a href="#">Brand Pop Ups</a></li>
          <li><a href="#">Weddings</a></li>
          <li><a href="#">Corporate Events</a></li>
          <li><a href="#">Festivals</a></li>
        </ul>
      </li>
      <li>
        <a href="#">How We Do It</a>
        <ul class="dropdown">
          <li><a href="#">Lighting</a></li>
          <li><a href="#">Sound</a></li>
          <li><a href="#">Video</a></li>
          <li><a href="#">Concept Design</a></li>
        </ul>
      </li>
      <li>
        <a href="/" class="noLine"><img src="/img/logo.svg" class="logoFlashB"></a>
      </li>
      <!--<li><a href="">Venues</a></li>-->
      <li><a href="/casestudies">Case Studies</a></li>
      <li><a href="#">Hire Stock
			<li><a href="/contact.php">Contact Us </a></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><a href="#">Who We Are</a>
      <li>
        <a href="#">What We Do</a>
        <ul class="dropdown">
          <li><a href="#">Brand Pop Ups</a></li>
          <li><a href="#">Weddings</a></li>
          <li><a href="#">Corporate Events</a></li>
          <li><a href="#">Festivals</a></li>
        </ul>
      </li>
      <li>
        <a href="#">How We Do It</a>
        <ul class="dropdown">
          <li><a href="#">Lighting</a></li>
          <li><a href="#">Sound</a></li>
          <li><a href="#">Video</a></li>
          <li><a href="#">Concept Design</a></li>
        </ul>
      </li>
      <li>
        <a href="/" class="noLine"><img src="/img/logo.svg" class="logoFlashB"></a>
      </li>
      <!--<li><a href="">Venues</a></li>-->
      <li><a href="/casestudies">Case Studies</a></li>
      <li><a href="#">Hire Stock
            <li><a href="/contact.php">Contact Us </a></li>
  </ul>
</nav>