Stripe Follow Along

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stripe Follow Along</title>

  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <nav class="main-menu">
    <div class="dropdownBackground"></div>

    <ul class="menu-list">
      <li>
        <a href="#" data-name="home">Home</a>

        <div class="dropdown dropdown1">
          <ul class="submenu home">
            <li><span class="icon">🍁</span><a href="#">Muffin gummi bears toffee</a></li>
            <li><span class="icon">🎀</span><a href="#">Beans toffee apple Liquorice</a></li>
            <li><span class="icon">🕶</span><a href="#">Cookie cheesecake marzipan</a></li>
            <li><span class="icon">💄</span><a href="#">Pie sweet roll</a></li>
            <li><span class="icon">🐝</span><a href="#">Jelly powder sesame</a></li>
            <li><span class="icon">🌹</span><a href="#">Cake caramels lé danish</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" data-name="about">About</a>

        <div class="dropdown dropdown2">
          <div class="submenu about">
            <img src="./img/leaves.jpg" alt="Leaves">

            <p>Pie cookie wafer jelly-o chocolate bar pie. Pudding chocolate candy canes soufflé gummies cake marzipan.
               Pie cookie wafer jelly-o chocolate bar pie. Pudding chocolate candy canes soufflé gummies cake marzipan</p>
          </div>
        </div>
      </li>
      <li>
        <a href="#" data-name="services">Services</a>

        <div class="dropdown dropdown3">
          <ul class="submenu services">
            <li><span class="icon">🎃</span><a href="#">Cake caramels liquorice. Danish jujubes cheesecake marzipan </a></li>
            <li><span class="icon">🌺</span><a href="#">Chupa chups macaroon liquorice. Danish jujubes cheesecake marzipan </a></li>
            <li><span class="icon">🍕</span><a href="#">Cake caramels liquorice. Danish jujubes cheesecake marzipan </a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" data-name="contact">Contact</a>

        <div class="dropdown dropdown4">
          <ul class="submenu contact">
            <li><span class="icon">🍁</span><a href="#">Chocolate</a></li>
            <li><span class="icon">🎀</span><a href="#">Icing Dessert</a></li>
            <li><span class="icon">🕶</span><a href="#">Croissant</a></li>
            <li><span class="icon">💄</span><a href="#">Lollipop Pudding</a></li>
            <li><span class="icon">🐝</span><a href="#">Topping Cookie</a></li>
            <li><span class="icon">🌹</span><a href="#">Lollipop Cookie</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>

  <script src="./scripts.js"></script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: linear-gradient(to right, #5c258d, #4389a2);
}

.dropdownBackground {
  background: #fff;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translateY(100px);
  transition: all .3s, opacity .1s, transform .2s;
  opacity: 0;
}

.dropdownBackground:before,
.dropdown:before {
  content: '';
  position: absolute;
  display: inline-block;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #fff transparent;
}

.dropdownBackground.open {
  opacity: 1;
}

.main-menu {
  background: rgba(255,255,255,1);
  border-radius: 5px;
  width: 750px;
  height: 60px;
  margin: 100px auto 0;
}

.menu-list  {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.menu-list > li {
  flex: 1;
  display: flex;
  justify-content: center;
  height: 120px;
}

.menu-list > li > a {
  align-self: center;
}

.menu-list li {
  list-style: none;
  text-decoration: none;
  outline: none;
}

.menu-list li a {
  color: #000;
  text-decoration: none;
}

.dropdown {
  padding: 40px;
  border-radius: 5px;
  position: absolute;
  transform: translateY(110px);
  opacity: 0;
  display: none;
  transition: all .5s;
}

.dropdown:before {
  border-color: transparent;
}

.dropdown.dropdown1 {
  max-width: 360px;
}

.dropdown ul {
  max-width: 300px;
}

.dropdown li {
  margin-bottom: 20px;
}

.dropdown li:last-child {
  margin-bottom: 0;
}

li .icon {
  margin-right: 10px;
  height: 100%;
}

.about {
  text-align: center;
}

.about img {
  width: 200px;
  margin-bottom: 30px;
}

.about p {
  width: 350px;
}

.trigger-enter .dropdown {
  display: block;
}

.trigger-enter-active .dropdown {
  opacity: 1;
}

@media screen and (max-width: 650px) {
  .main-menu {
    width: 90vw;
    height: 50px;
    margin-top: 70px;
  }

  .menu-list ul {
    max-width: 140px;
  }

  .menu-list li,
  .menu-list p {
    font-size: 10px;
  }

  .menu-list > li {
    font-size: 12px;
  }

  .dropdown {
    padding: 20px;
    transform: translateY(105px);
  }

  .dropdown li {
    margin-bottom: 5px;
  }

  .about img {
    width: 100px;
    margin-bottom: 10px;
  }

  .about p {
    width: 200px;
  }

  .dropdownBackground {
    transform: translateY(70px);
  }
}

let menu = document.querySelector('.main-menu'),
    triggers = document.querySelectorAll('.menu-list > li'),
    dropdownBackground = document.querySelector('.dropdownBackground');

function handleEnter() {
  this.classList.add('trigger-enter');
  setTimeout(() => this.classList.contains('trigger-enter') &&
                   this.classList.add('trigger-enter-active'), 150);
  dropdownBackground.classList.add('open');

  let dropdown = this.querySelector('.dropdown');
  let dropdownCoords = dropdown.getBoundingClientRect();
  let navCoords = menu.getBoundingClientRect();
  let coords = {
    width: dropdownCoords.width,
    height: dropdownCoords.height,
    top: dropdownCoords.top - navCoords.top,
    left: dropdownCoords.left
  }

  dropdownBackground.style.setProperty('width', `${coords.width}px`);
  dropdownBackground.style.setProperty('height', `${coords.height}px`);
  dropdownBackground.style.setProperty('top', `${coords.top}px`);
  dropdownBackground.style.setProperty('left', `${coords.left}px`);
}

function handleLeave() {
  this.classList.remove('trigger-enter', 'trigger-enter-active');
  dropdownBackground.classList.remove('open');
}

triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));