Css 为什么我的下拉菜单没有出现在鼠标悬停上？

为什么下拉菜单对css悬停不起作用？我在youtube上看过很多人这样做，看起来很简单

HTML

---

我是个新手，希望我已经包含了足够的代码。我想可能是别的什么东西在别的地方阻止了它

这是因为您的css不正确。你的.drop菜单类不在drop类中，它在它旁边

我认为如果您将css更改为：

.drop-menu {
    display: none;
}

.drop:hover + .drop-menu{
    display: block;
}

它会起作用的。+运算符用于选择css邻居。但是你也可以在整个菜单结束后结束你的a。像这样放下菜单

<li>
 <a href="#" class="drop">Demos
   <ul class="drop-menu">
        <li><a href="#" class="color" id="castellano">Castellano</a></li>
        <li><a href="#" class="color">Ingles</a></li>
        <li><a href="#" class="color">Videos</a></li>
   </ul>
 </a>
</li>

演示

---

所以现在我已经有一些时间来处理这件事了。。。只要向下尝试并选择下拉菜单，下拉菜单就会消失。编辑我的答案，我发现它在这个小区域不起作用，但如果你展开它，它就会起作用。你可以相应地改变你的li元素的宽度。我希望我的解释有点清楚！祝你今天愉快，解释得很好。我只使用了top，因为我需要让下拉菜单在页面下方以大约20px的速度显示。不确定其他方法如何处理该问题。请使用页边距顶部或填充顶部：

.drop-menu {
    display: none;
}

.drop:hover + .drop-menu{
    display: block;
}

<li>
 <a href="#" class="drop">Demos
   <ul class="drop-menu">
        <li><a href="#" class="color" id="castellano">Castellano</a></li>
        <li><a href="#" class="color">Ingles</a></li>
        <li><a href="#" class="color">Videos</a></li>
   </ul>
 </a>
</li>