How to make a dropdown stay on hover when pointer rolls in?

Why does the dropdown disappear when I move the pointer away? It feels like I haven't applied :hover to the right element but I can't figure it out. Is there a way to quickly find out where :hover should be?

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #fbb2c3;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 45%;
}

.nav-links li {
  list-style: none;
  position: relative;
}

.nav-links a {
  text-decoration: none;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.nav-links li ul {
  visibility: hidden;
  opacity: 0;
  min-width: 10rem;
  position: absolute;
  margin-top: 2rem;
  left: 0;
  display: none;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

<body>
  <nav>
    <ul class="nav-links">
      <li><a class="dropdown" href="#">portfolio</a>
        <ul class="dropdown-content">
          <li><a href="#">littérature</a></li>
          <li><a href="#">sous-titrage</a></li>
          <li><a href="#">web</a></li>
        </ul>
      </li>
      <li><a href="CV.html">parcours</a></li>
      <li><a href="Intro.html">profil</a></li>
      <li><a href="Contact.html">contact</a></li>
      <li><a href="Contact.html">carte de visite</a></li>
    </ul>
  </nav>
</body>

Solution

The problem you're having happens because there's a space between the link you hover over, and the dropdown menu.

You are using the :hover on the right element. Between your child UL and your parent link there is a margin of 2rem. That means that in that margin, you are outside of the the parent and outside of the child. You need to have that void filled with either parent or child. In the modified snippet below, you'll see that I turned the top margin in the child UL into a padding. The padding is inside the UL, while the margin is outside of it.

My proposed solution is not the only one that would fix it, it will depend on what visuals you are trying to achieve apart from this functionality.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #fbb2c3;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  /*width: 45%; Commented out because of how this shows in the SO iframe */
}

.nav-links li {
  list-style: none;
  position: relative;
}

.nav-links a {
  text-decoration: none;
  letter-spacing: 0.5px;
  font-weight: bold;

}

.nav-links li ul {
  visibility: hidden;
  opacity: 0;
  min-width: 10rem;
  position: absolute;
  padding-top: 2rem; /* PROPOSED SOLUTION */
  left: 0;
  display: none;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

<body>
  <nav>
    <ul class="nav-links">
      <li><a class="dropdown" href="#">portfolio</a>
        <ul class="dropdown-content">
          <li><a href="#">littérature</a></li>
          <li><a href="#">sous-titrage</a></li>
          <li><a href="#">web</a></li>
        </ul>
      </li>
      <li><a href="CV.html">parcours</a></li>
      <li><a href="Intro.html">profil</a></li>
      <li><a href="Contact.html">contact</a></li>
      <li><a href="Contact.html">carte de visite</a></li>
    </ul>
  </nav>
</body>