How to make menu remain visible while on hover - html

Question

I've created a submenu which appears when you hover over the 'services' link. However, when I move my mouse over to the submenu it disappears due to it sitting below the navigation where I want it to be.
So far I’ve tried leaving the submenu in its natural top position and using z-index to make it sit behind the navigation. I found that this wouldn't work due to the submenu being positioned absolute.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
The submenu should sit exactly below the navigation and stay visible when I move my mouse across from the link to the submenu.

Answer 1

I have included padding-bottom: 20px; on hover
the link need to be connected to the submenu so that it is still hovered
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>

Answer 2

Remove margin .nav ul & add padding for .nav a
.nav ul {
list-style: none;
padding: 0px;
margin:0;
}
.nav a {
color: #000;
padding: 10px 0;
display: block;
}
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
padding: 10px 0;
display: block;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
margin:0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>

Answer 3

I used this.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
opacity: 0;
left: 0;
right: 0;
display: none;
}
.sub-menu::before {
content: "";
top: -18px;
width: 100%;
height: 20px;
position: absolute;
}
<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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>

Answer 4

Just replace this to your existing css, nothing else.
.nav a {
color: #000;
padding-bottom: 20px;
display: inline-block;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0;
}