下拉菜单-项目依赖

Question

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

一些代码说明：

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

我想要的是当MENU onlink ，它的整个子菜单（此处均为submenu和submenu2 ）也应该可见（注意，我们没有单击任何特定的子菜单）。

是否有可能在纯CSS中建立这种依赖关系？

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

Answer 1

我认为即使在MENU不在ONLINK之后，您也希望将子MENU也ONLINK 。 这是一个解决方案。 希望这是您想要的。 我使用了opacity css属性。

#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

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

#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
}