How recreate navigation animations - html

Question

I'm trying to replicate the navigation bar from this website and can't work out how to do the following two things:
Create the page background overlay on hover of the submenu
How to make the submenu have the same expand reveal on hover of the link.
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 {
display: flex;
width: 100%;
}
.nav {
width: 1100px;
margin: auto;
position: relative;
padding: 0 40;
}
.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: #eee;
padding-bottom: 20px;
}
.nav ul li:hover {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
padding: 0 35px 20px 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1;
height: 200px;
}
.sub-menu {
height: 0px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #2E2E2E;
display: none;
opacity: 0;
left: 0;
right: 0;
}
.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>
I previously tried getting the overlay to work by adding a separate div to the end of the code and setting the opacity to zero, I then added more code to change the opacity to one, however, this failed.
What would be the best practise to achieve the two aspects above?

Answer 1

The sub-menu is done using absolute positioning and making all the ancestors up until the container not have any positioning (or default static positioning), so the sub-menu is positioned absolutely to the container.
The expand reveal is done using a height animation - the sub-menu has a fixed height that is animated on hover of the parent li
The overlay is done using fixed positioning and javascript - whenever you see inline styles change like that, you know it's js animation and not css.
Below I have added jQuery and shown a quick demo of how they may have done it
var $overlay = $('.overlay');
$('.sub-menu').parent()
.on('mouseenter', function() {
$overlay.fadeIn('fast');
})
.on('mouseleave', function() {
$overlay.fadeOut('fast');
});
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 {
z-index: 2;
position: relative;
display: flex;
width: 100%;
background:blue; /* needs a colour so you cannot see overlay behind */
}
.nav {
width: 1100px;
margin: auto;
position: relative;
padding: 0 40;
}
.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: #eee;
padding-bottom: 20px;
}
.nav ul li:hover {
color: #333;
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;
/* hide the overflow so you don't need to worry about display and opacity */
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #2E2E2E;
left: 0;
right: 0;
transition: height 1s ease;
/* add this for your animation and remove display none */
}
.col-1-4 {
height: 100%;
width: 25%;
position: relative;
}
.service {
padding: 20%;
}
.nav.servicesIsHovered {
background-color: #272727;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
display:none;
/* above the body but below the header */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div class="overlay"></div>