Html CSS：为什么不能使用img:hover来显示下拉菜单

我想执行一个操作，当我将鼠标悬停在图像上时，将显示下拉菜单

下面的代码工作正常

HTML、CSS：

菜单{
位置：相对位置；
显示：内联块；
}
.菜单.下拉菜单{
位置：绝对位置；
最高：100%；
左：0；
保证金：0；
显示：无；
}
.菜单：悬停.下拉菜单{
显示：块；
}

基于此结构：

<div class="menu">      
<img src="icon.jpg" id="menu-icon" alt="menu-icon"></img>
<ul class="dropdown-menu">
<li><a href="#home">Account</a></li>   
</ul>
</div>

您使用的

.menu图标

和

.dropdown menu

之间的空间假定菜单是图像的子菜单，而不是图像的子菜单

菜单是下一个同级菜单，使用

+

组合器选择

---

我想补充一点，使用鼠标悬停作为显示菜单的唯一方式并不十分方便用户。如果不使用鼠标，则无法与菜单交互。此外，即使使用鼠标，也很难进行交互，因为一旦鼠标没有实际悬停，菜单就会关闭

---

我建议尝试其他方法，或者添加一些JavaScript来提高可访问性

像这样做

#菜单图标：hover+。下拉菜单{

这是一个后代选择器。您没有后代。

#menu-icon:hover + .dropdown-menu {
display:block;  
}