How to make menu remain visible while on hover

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>