I am struggling with a sidebar menu that includes dropdowns and a lengthy list requiring a scroll bar.
The challenge I am facing is that either the scrollbar is positioned off the screen, or the dropdowns are hidden due to the overflow: hidden; property being set.
Below is my CSS code:
/* I want dropdowns to be on the left */
.dropdown-menu {
top: 0;
left: -160px;
}
#rightbar {
position: fixed;
right: 0;
height: 100%;
background: lightgray;
width: 300px;
}
/* Usually you would do this, but it hides the dropdown; additionally, the scrollbar is positioned off-screen */
#wrap {
height:100%;
overflow:hidden;
}
#bottomStuff {
height: 100%;
overflow-y: auto;
}
https://jsfiddle.net/cp0fqyt9/
Is there a way to make dropdowns and scrollbars functional in a fixed-position sidebar layout without using JavaScript?