Dropdown menu content cannot be selected-CodePudding

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
  border-radius: 10px;
  padding-right: 0;
  margin-top: 10px;
  margin-left: -24px;
}

.dropdown-content a {
  padding: 12px 6px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .dropdown-content li {
  display: block;
  border-radius: 25px;
  margin: 15px 0px;
  text-align: left;
}

<nav>
  <ul >
    <li a href="#">Home</li>
    <li >
      <a href="#">Products</a>
      <ul >
        <li a href="#">Health Care</li>
        <li a href="#">Cosmetic</li>
        <li a href="#">Misc.</li>
      </ul>
    </li>
    <li a href="#">About Us</li>
    <li a href="#">Register</li>
  </ul>
</nav>

The dropdown-content keeps disappearing when I want to select it. I didn't really know where the problem is. when you hover over "products" the dropdown-content appears but when you want to select it, the content disappears.

CodePudding user response：

The problem is with the margin-top on .dropdown-content.

Instead, use padding-top and it won't disappear.

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
  border-radius: 10px;
  padding-right: 0;
  margin-left: -24px;
  padding-top: 10px;
  padding-inline-start: 0;
  padding: 0 1rem;
}

.dropdown-content a {
  padding: 12px 6px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .dropdown-content li {
  display: block;
  border-radius: 25px;
  margin: 15px 0px;
  text-align: left;
}

.nav_links {
  display: flex;
  justify-content: space-between;
}

.dropdown-content>li:hover {
  background-color: #e1e1e1;
  padding-inline-start: 0;
}

<nav>
  <ul >
    <li><a href="#">Home</a></li>
    <li >
      <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>