无法选择下拉菜单内容

Question

.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 class="nav_links">
<li a href="#">Home</li>
<li class="dropdown">
<a href="#">Products</a>
<ul class="dropdown-content">
<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>

当我想选择dropdown-content时，它一直在消失。我真的不知道问题出在哪里；产品"；此时会显示下拉内容，但当您想要选择它时，内容会消失。

Answer 1

问题出在.dropdown-content上的margin-top上。

相反，使用padding-top，它不会消失。

.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 class="nav_links">
<li><a href="#">Home</a></li>
<li class="dropdown">
<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>