Question

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

一些代码说明：

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

我想要的是当MENU为onlink时，其整个子菜单（此处同时为submenu和submenu2）也应该可见（请注意，我们没有点击任何内容特别子菜单）。

是否有可能在纯css中建立这种依赖？

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

Answer 1

我认为即使在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 (~)包含.sub-menu之后的每个#onlink。

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

jsFiddle Demo

Answer 3

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

.class:hover {
  // Your CSS code
}

下拉菜单 - 项目依赖

3 个答案: