html - 下拉菜单 - 项目依赖

Question

这是我的菜单的完整代码。为了清楚起见，我不再在这里发布它。

一些代码解释：

id="onlink"表示链接被点击。该页面处于活动状态。

我想要的是什么时候MENU是onlink，它的整个子菜单（这里是：submenu和submenu2）也应该变得可见（注意我们没有点击任何特定的子菜单）。

是否可以在纯 css 中建立这种依赖关系？

到目前为止，子菜单仅在菜单悬停时弹出并在其后消失。

Answer 1

MENU我认为即使在is not之后，您也希望将子菜单悬停ONLINK。这是一个解决方案。希望这是您正在寻找的。我使用了opacitycss属性。

#menu li ul.sub-menu {
    opacity: 0;
    position:absolute;
}

    #menu li ul.sub-menu a {
        border: none;
        background: none;
        display: block;
    }

    #menu li:hover .sub-menu {
       opacity:1;
        width: 150px;
        text-align: center;
    }

这是一个小提琴http://jsfiddle.net/Y8pnm/2/

Answer 2

只需扩展您的选择器以.sub-menu包含#onlink使用General sibling selector (~).

#menu li:hover .sub-menu,
#menu #onlink ~ .sub-menu {
    display:block;
    width: 150px;
    text-align: center;
}

jsFiddle 演示

Answer 3

你可以让 MENU 和它的子菜单共享同一个类，然后使用

.class:hover {
  // Your CSS code
}