Dropdown content not showing up

Question

When hovering over the "product" the content doesn't appear:

<nav>
  <ul class="nav_links">
    <li a href="#">Home</li>
    <li class="dropdown" id="lol" a href="#">Products</li>
    <ul class="dropdown-content">
      <li a href="#">Health Care</li>
      <li a href="#">Cosmetic</li>
      <li a href="#">Misc.</li>
    </ul>
    <li a href="#">About Us</li>
    <li a href="#">Register</li>
  </ul>
</nav>

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a{
    float: none;
    color: black;
    padding: 12px 6px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: black;
}

.dropdown:hover .dropdown-content{  
    display: block;
}

.dropdown:hover should be the case? I don't know what's wrong with the code or class. What do you think I should try ?

Answer 1

.dropdown-content {
    display: none;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a{
    float: none;
    color: black;
    padding: 12px 6px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content{  
    display: block;
}

<nav>
  <ul class="nav_links">
    <li><a href="#">Home</a></li>
    <li class="dropdown" id="lol">
      <a href="#">Products</a>
      <ul class="dropdown-content">
        <li><a href="#">Health Care</a></li>
        <li><a href="#">Cosmetic</a></li>
        <li><a href="#">Misc.</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Register</a></li>
  </ul>
 </nav>

Your code looks fine but you did not put an anchor tag inside the li tag. another thing I changed is in styling I removed absolute from dropdown-content, as it overlaps contents on each other.