如何避免从按钮移除光标时消失的下拉菜单?

Question

当我将鼠标悬停在按钮上时，我看到了下拉菜单，但是当我导航到菜单上的任何项时，下拉菜单就消失了。我想我知道的问题是，我有hover添加在按钮上，但我怎么能使它像一个正常的下拉?

.dropdown {
display: inline-block;
padding: 5px;
/* background:#f1f1f1; */
}
.dropbtn {
padding: 5px;
margin-bottom: 0px;
width: 100%;
}
.dropdown-content {
display: none;
list-style: none;
background: #f1f1f1;
position: relative;
top: 0px;
left: 0px;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
z-index: 1;
width: 100%;
}
.dropdown-content li {
margin-bottom: 0px;
padding: 3px;
}
.dropdown-content li a {
text-decoration: none;
color: black;
padding: 3px;
}
.dropdown-content li:hover,
.dropdown-content li a:hover {
text-decoration: none;
color: white;
background-color: #333;
}
.dropbtn:hover+.dropdown-content {
display: block;
}

<div class="dropdown">
<button class="dropbtn">More</button>
<ul class="dropdown-content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

当我将鼠标悬停在下拉菜单中的子元素上时，我希望下拉菜单保持可见，就像任何其他下拉菜单一样。

Answer 1

您可以直接在.dropdown元素上设置:hover属性，如下所示:

.dropdown {
display: inline-block;
padding: 5px;
/*background:#f1f1f1; */
}
.dropbtn {
padding: 5px;
margin-bottom: 0px;
width: 100%;
}
.dropdown-content {
display: none;
list-style: none;
background: #f1f1f1;
position: relative;
top: 0px;
left: 0px;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
z-index: 1;
width: 100%;
}
.dropdown-content li {
margin-bottom: 0px;
padding: 3px;
}
.dropdown-content li a {
text-decoration: none;
color: black;
padding: 3px;
}
.dropdown-content li:hover,
.dropdown-content li a:hover {
text-decoration: none;
color: white;
background-color: #333;
}
.dropdown:hover .dropdown-content {
display: block;
}

<div class="dropdown">
<button class="dropbtn">More</button>
<ul class="dropdown-content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Answer 2

您在CSS中使用hover，这是您的情况下的正常行为。如果你想点击按钮，并显示下拉菜单，你需要一些Javascript和一个onclick事件:

function showDropdown() {
var content = document.getElementById("dropdown-content");
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}

.dropdown{
display:inline-block;
padding:5px;
/*   background:#f1f1f1; */
}
.dropbtn{
padding:5px;
margin-bottom:0px;
width:100%;
}
.dropdown-content{
display:none;
list-style:none;
background:#f1f1f1;
position:relative;
top:0px;
left:0px;
padding: 0px 0px 0px 0px;
margin:0px;
text-align: center;
z-index:1;
width:100%;
}
.dropdown-content li{
margin-bottom:0px;
padding:3px;
}
.dropdown-content li a{
text-decoration:none;
color:black;
padding:3px;
}
.dropdown-content li:hover
,.dropdown-content li a:hover{
text-decoration:none;
color:white;
background-color:#333;
}

<div class="dropdown">
<button class="dropbtn" onclick="showDropdown()">More</button>
<ul class="dropdown-content" id="dropdown-content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>