纯css条件菜单：隐藏level2悬停的level1信息

Question

我正在开发一个带有信息区域的纯CSS下拉菜单。

我的问题是，我想显示第一级的信息，但是当你将鼠标悬停在第二级时隐藏它。 这是一个JSFiddle

问题是，我不知道如何隐藏第一级信息

我知道我无法访问父级，因此我尝试将其设置为条件，例如：

menu-level1 > ul > li:not(.menu-level2):hover > .menu-info

但它似乎不起作用。

我如何编写条件才能让它发挥作用？

Answer 1

我很高兴我终于理解了你的意思，虽然遇到了一些困难。 而且，当我得到你想要的东西时，我感到更快乐： - ）

这是：http://jsfiddle.net/5Jjfj/11/

新css（非常小的变化）：

.menu-level1 > ul > li a:hover + .menu-info, .menu-info:hover {
    display: block;
}

代替：

.menu-level1 > ul > li:hover > .menu-info, .menu-info:hover {
    display: none;
}

Answer 2

检查一下。

http://jsfiddle.net/5Jjfj/4/

.menu-level1 > ul > li:hover > .menu-info, .menu-info:hover {
    display: none;
}