为什么将鼠标悬停在主div上会显示下拉菜单，而按钮却没有

Question

当用户悬停在按钮上时，我试图显示下拉列表，但只有当我将悬停操作添加到父容器div时，下拉列表才会显示。当我将.download:hover(第四个选择器-将显示更改为块(更改为.downloadbtn:hover时，它不起作用，在实际情况下可能会导致问题。为什么会发生这种事。这与定位有关吗？！

这是小提琴https://jsfiddle.net/waleedrana777/yexhmbsq/1/

* {
font-family: sans-serif;
font-weight: bold;
margin: unset;
text-decoration: none;
}
.dropdownbtn {
border: 0ch;
min-width: 50px;
min-height: 50px;
background-color: rgb(58, 199, 58);
}
.dropdown:hover .dropdownbtn {
background-color: rgb(44, 151, 44);
}
.dropdown:hover ul.menu {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
margin: 10px;
text-align: center;
}
.dropdown-content {
position: absolute
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul>li {
display: flex;
align-items: center;
justify-content: center;
}
.menu {
display: none;
box-shadow: 10px 0px 95px 0.1px rgba(0, 0, 0, 0.472);
}
.menu>li {
text-decoration: none;
min-width: 105px;
min-height: 50px;
padding: 10px;
background-color: rgb(58, 199, 180);
border-bottom: black 1px;
}
.menu>li:hover,
.sub-menu>li:hover {
background-color: rgb(47, 148, 134);
}
.sub-menu-toggle {
position: relative;
}
.sub-menu {
position: absolute;
display: none;
left: 125px;
top: 0px;
background-color: rgb(58, 199, 180);
box-shadow: 10px 0px 95px 0.1px rgba(0, 0, 0, 0.472);
}
.sub-menu>li {
padding: 10px;
min-height: 50px;
min-width: 105px;
}
.sub-menu-toggle:hover .sub-menu {
display: block;
}
.dropdown-content li::before {
content: ;
}

<div class="dropdown">
<button class="dropdownbtn">Dropdown button</button>
<div class="dropdown-content">
<ul class="menu">
<li><a href='#'>Home</a></li>
<li class="sub-menu-toggle">
<a href='#'>Products</a>
<ul class="sub-menu">
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
<li><a href='#'>Product 4</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>

Answer 1

这似乎是由于定位造成的。你提到过。下拉列表：悬停有效，但将其更改为以下内容无效：

.dropdownbtn:hover ul.menu {   
display: block;
}

这是因为这里声明的选择器正在.dropdownbtn内部查找不存在的类为menu的子元素。

使用.dropdown:hover是有效的，因为ul.menu元素是div.dropdown元素的后代，而不是button.dropdownbtn元素。