Question

我试图创建一个这样的菜单：Demo。

首先：这是我的fiddle。菜单上有一个按钮顶部，侧边栏菜单有4个链接，最后一个链接有子链接。

点击按钮菜单后会变得更宽。

到目前为止一切顺利。我希望在最后一个链接上显示鼠标时显示子链接，并且我想在菜单变宽时用点击显示父链接下方的子链接。

我这样做了，但是有一个问题。当菜单变宽时我想用点击显示子链接。

但现在它没有！

这是我的重要CSS

.rightbar.noneStyle #rightMenu.accordion:hover .accordion-body.collapse{
    background: none repeat scroll 0 0 #fff;
    display: none;
    height:0;
    position:unset;
    right: auto;
    top: auto;
    visibility: visible;
}

.rightbar #rightMenu.accordion:hover .accordion-body.collapse {
    background: none repeat scroll 0 0 #fff;
    display: block;
    height: auto !important;
    position: absolute;
    left: 61px;
    top: -8px;
    visibility: visible;
}

Answer 1

我在css中做了一些更改，并且完全按照Demo中的显示进行了更改。这是我的更新代码 http://jsfiddle.net/sushantmaharjan/z5ogk3yb/

我在css中使用过:not(selector)。检查浏览器兼容性。它适用于大多数现代浏览器。

带有bootstrap和jQuery的垂直菜单

1 个答案: