向下导航下拉菜单

Question

目前我的下拉菜单有些噩梦。当“悬停”在菜单项上方以查看子菜单时，菜单栏的其余部分将被向下推。

我目前在调试时将鼠标悬停了。任何建议都很好！

https://codepen.io/bradleyr/pen/JjGKZpB

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>

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;
}

非常感谢，布拉德！

示例图像...Broken

How it's supposed to look

Answer 1

将弹性配置添加到.main-menu ul以配置所需的输出。

    .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>