<nav class="top">
  <div class="dropdownBackground">
    <span class="arrow"></span>
  </div>
  <ul class="cool">
    <li>
      <a href="#">A</a>
      <div class="dropdown dropdown1"></div>
    </li>
    <li>
      <a href="#">B</a>
      <div class="dropdown dropdown2"></div>
    </li>
    <li>
      <a href="#">C</a>
      <div class="dropdown dropdown3"></div>
    </li>
  </ul>
</nav>

html {
  box-sizing: border-box;
  font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
    linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
    linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
    linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}

nav {
  position: relative;
  perspective: 600px;
}

.cool > li > a {
  color: yellow;
  text-decoration: none;
  font-size: 20px;
  background: rgba(0,0,0,0.2);
  padding:10px 20px;
  display: inline-block;
  margin:20px;
  border-radius:5px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.cool > li {
  position: relative;
  display:flex;
  justify-content: center;
}

.list {
  color: red;
  flex-direction: column;
}

.dropdown {
  opacity: 0;
  position: absolute;
  overflow: hidden;
  top:-20px;
  border-radius:2px;
  transition: all 0.5s;
  transform: translateY(100px);
  will-change: transform;
  display: none;
}

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

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

.dropdownBackground {
  width:100px;
  height:100px;
  position: absolute;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
  transition:all 0.3s, opacity 0.1s, translate 0.2s;
  transform-origin: 50% 0%;
  display: flex;
  justify-content: center;
  opacity:0;
}

.dropdownBackground.open {
  opacity: 1;
}

.arrow {
  position: absolute;
  width:15px;
  height:15px;
  display: block;
  background:white;
  transform: translateY(-50%) rotate(45deg);
}

.dropdown1 {
  min-height: 200px;
  min-width: 120px;
}

.dropdown2 {
  min-height: 150px;
  min-width: 200px;
}

.dropdown3 {
  min-height: 70px;
  min-width: 80px;
}

/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
.button[href*=twitter] { background: #019FE9; }
.button[href*=facebook] { background: #3B5998; }
.button[href*=courses] { background: #ffc600; }

const triggers = document.querySelectorAll('.cool > li');
const background = document.querySelector('.dropdownBackground');
const nav = document.querySelector('.top');

function handleEnter() {
  this.classList.add('trigger-enter');
  setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
  background.classList.add('open');
  const dropdown = this.querySelector('.dropdown');
  const drodownCoords = dropdown.getBoundingClientRect();
  const navCoords = nav.getBoundingClientRect();
  const coords = {
    height: drodownCoords.height,
    width: drodownCoords.width,
    top: drodownCoords.top - navCoords.top,
    left: drodownCoords.left - navCoords.left    
  };
  console.log(coords);
  background.style.setProperty('height', `${coords.height}px`);
  background.style.setProperty('width', `${coords.width}px`);
  background.style.setProperty('top', `${coords.top}px`);
  background.style.setProperty('left', `${coords.left}px`);    
}

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

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