下拉菜单不会弹出

Question

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

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

a:hover + ul{
    opacity: 1;
}

在实际情况中，下拉部分（嵌套的ul）被隐藏（显示：无），并且每当“父”链接悬停时也应该弹出。如chromes代码检查器和指针作为光标所示，a悬停，但没有任何反应。

我也试过

li:hover ul{
    opacity: 1;
}

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

我找了一些有类似问题但找不到任何帮助的人。有人知道该怎么做吗？

Answer 1

您的问题涉及特异性。 :hover并不像你的第一条规则那么强大。所以改成它：

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

背后的原因是，id属性优先于通用属性。请参阅此处的优先顺序：

示例：

小提琴：https://jsfiddle.net/jyngjhpb/1/