如何复制菜单悬停动画

Question

我正在从此website重新创建导航，但是无法获得完全相同的动画。一切正常，但似乎还差一点。

到目前为止，我已经尝试增加和减少过渡时间，但是在示例中并没有得到解决。

const styleParent = (event) => {
  let ancestor = document.querySelector('div.nav');
  ancestor.classList[event.type === 'mouseenter' ? 'add' : 'remove']('servicesIsHovered');
};

let child = document.querySelector('li.three');

child.addEventListener('mouseenter', styleParent);
child.addEventListener('mouseleave', styleParent);

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

a {
  text-decoration: none;
}

.main {
  width: 100%;
}

.section {
  width: 100%;
  background: #ededed;
}

.header {
  position: relative;
  display: flex;
  width: 100%;
}

.nav {
  width: 1100px;
  margin: auto;
  position: relative;
  padding: 0 40;
  transition: background-color 0.3s ease;
}

.nav li {
  color: #000;
}

.nav li a {
  cursor: pointer
}

.nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  width: fit-content;
}

.nav ul:hover li {
  color: #6C6C6C;
  padding-bottom: 20px;
}

.nav ul li:hover {
  color: #000;
  padding-bottom: 20px;
}

.nav li:last-child {
  margin: 0;
}

.nav ul li {
  display: inline-block;
  padding: 0 35px 20px 0;
}

li:hover>.sub-menu {
  height: 200px;
}

.sub-menu {
  height: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 100%;
  background: #2E2E2E;
  left: 0;
  right: 0;
  transition: height 0.5s ease;
}

.col-1-4 {
  height: 100%;
  width: 25%;
  position: relative;
}

.service {
  padding: 20%;
}

.nav.servicesIsHovered {
  background-color: #272727;
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu">
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
        </div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>

该动画似乎不如从网站上获得的平滑。另外，它们似乎不同步。