How to replicate menu hover animations - html

Question

I'm recreating the navigation from this website but can't get the animations quite the same. It's all working but seems to be a little off.
so far I've tried to increase and decrease the transition timing but it didn't get it anywhere near the example.
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>
The animation doesn't seem to be as smooth as from the website. Also, they don't seem to be as in sync.