Dropdown content not showing up - css

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>Home</li>
<li class="dropdown" id="lol">
Products
<ul class="dropdown-content">
<li>Health Care</li>
<li>Cosmetic</li>
<li>Misc.</li>
</ul>
</li>
<li>About Us</li>
<li>Register</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.