Dropdown content didn"t show-CodePudding

when hover over the "product" the content didnt appear

<nav>
      <ul >
        <li a href="#">Home</li>
        <li  id="lol" a href="#">Products</li>
          <ul >
            <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 didnt know what wrong with the code or class. what do you think i should try ?

CodePudding user response：

.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 >
    <li><a href="#">Home</a></li>
    <li  id="lol">
      <a href="#">Products</a>
      <ul >
        <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.