下拉菜单不弹出

Question

我在这里创建了我的情况的简化版本：https://jsfiddle.net/jyngjhpb/

在这个例子中，当鼠标悬停在上面的 a 时，下拉部分不会改变它的不透明度：

a:hover + ul{
    opacity: 1;
}

在真实情况下，下拉部分（嵌套 ul）是隐藏的（显示：none），并且在悬停 'parent' link 时也应该弹出。 a 悬停，如 Chrome 代码检查器所示，指针为光标，但没有任何反应。

我也试过了

li:hover ul{
    opacity: 1;
}

因为 + 可能在浏览器中不起作用（毕竟你也在悬停父 li），但这也失败了。

我找过一些有类似问题的人，但找不到任何有用的东西。有人知道在这里做什么吗？

Answer 1

您的问题涉及特异性。 :hover 不如您的第一条规则那么强大。所以将其更改为：

#menuList ul {
  opacity: .3;
}
#menuList a:hover + ul {
  opacity: 1;
}

其背后的原因是，id 属性优先于通用属性。看这里的优先级：

示例：

drop down menu doesn't pop up