在菜单上使用滚动条时如何显示子菜单？

Question

Good morning, I have a menu where you need it has a vertical side bar. As you can see in the picture, I could add it. However, when the mouse pointer hovers over the menu items, submenus appear, but they are hidden by the bar. I would like the sub menus stay overlapped the bar, ie, they appeared in front, not getting hidden. Already tried changing the z-index of the submenu, but it did not work. Anyone know any alternative, or how can I solve this?

then, as the system menu is all dynamically mounted, I created an example in jsFiddle. The problem is that the menu has sub-menus, and when I try to access them, they are "inside" the box that creates the scrollbar. link: jsfiddle.net/tBJe3/10/

thank you!

Answer 1

try this one,

.menuLateral {
    margin-left: 4px;
    margin-top: 1%;
    position: relative;
    width: 35%;
    height:200px;
    color: #B2C2B9;
    float: left;
    overflow:visible;
} 

http://jsfiddle.net/tBJe3/11/

Answer 2

In your code you have set position: relative; for almost all containers. If you remove them, your absolutely positioned sub-menus will be relative to the document and also will be on top of your scrollable content.

Here is the updated version of your code in JSFiddle .

Please note , that by doing in this way, some of your sub-menu s will not appear where you want. So maybe you need to make with fixed positions or position them manually (and dynamically ) using JavaScript .