Text (Absolute) Will Not Pass Through Vertical Scroll Bar - html

Question

Currently I have a sidebar on my website, and when a user hovers something on the sidebar it should bring up a popover. Yet there is this really weird issue!
The sidebar has a vertical scroll bar, and when the popover comes up it will not go over the scroll bar. Here is a image of it (Please note that is not going to be the actual popover, it is just for testing):
Sorry, not sure why the text is appearing down here. Anyhow as you can see when there is a scroll bar the text will not pass through it, yet when the scroll bar is removed the text WILL pass through it. Here is all of the important CSS:
.sidebarbuttons2 {
width: 100%;
height: 5%;
margin-left: auto;
margin-right: auto;
background-color: gray;
text-align: center;
font-size: 70%;
border-bottom: 2px solid #474747;
z-index: 2;
}
.sidebarbuttons2 li .dropdownbuttonsholder {
display: none;
margin: 0;
padding: 0;
margin-left:150px;
float:left;
margin-top: -45px;
height: 0;
z-index: 3;
}
.sidebarbuttons2 li:hover .dropdownbuttonsholder {
width: 200px;
background-color: blue;
border: 1px solid black;
list-style: none;
height: 25px;
display: block;
z-index: 4000;
position: absolute;
}
#dropdownbuttonitem1 {
background-color: red;
height: 25px;
z-index: 5;
}
#dropdownbuttonitem2 {
background-color: green;
height: 25px;
z-index: 5;
}
#dropdownbuttonitem3 {
background-color: yellow;
height: 25px;
z-index: 5;
}
#dropdownbuttonitem4 {
background-color: orange;
height: 25px;
z-index: 5;
}
/*-------------------------------------------------------*/
/*Sidebar Style*/
/*-------------------------------------------------------*/
.sidebarpostinbutton {
color: orange;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 1900px;
background-color: gray;
z-index: 1;
border-right: 3px solid #474747;
position: absolute;
overflow-y: scroll;
font-size: 88%;
}
#sidebar:hover {
width: 25%;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
.sidebarbuttons {
width: 100%;
height: 5%;
margin-left: auto;
margin-right: auto;
background-color: gray;
text-align: center;
font-size: 70%;
line-height: 0%;
border-bottom: 2px solid #474747;
}
#sidebarbuttonlast1 {
border-bottom: 0px;
}
#sidebarscrollinformation {
display: none;
}
/*-------------------------------------------------------*/
/*Main Contents Box Style*/
/*-------------------------------------------------------*/
.maincontentssection {
background-color: lightgray;
margin-left: 20%;
height: 1900px;
position: absolute;
width: 80%;
overflow-y: scroll;
z-index: 1;
}
And then here is the important HTML:
<div id="sidebar">
<div class="col-xs-12 col-sm-6 col-md-12">
<ul class="nav sidebarbuttons2"> <!-- navbar -->
<li> <h1> Art </h1>
<ul class="dropdownbuttonsholder row">
<ul id="dropdownbuttonitem1" class="col-xs-3"> All Posts </ul>
<ul id="dropdownbuttonitem2" class="col-xs-3"> Most Popular </ul>
<ul id="dropdownbuttonitem3" class="col-xs-3"> Most Viewed </ul>
<ul id="dropdownbuttonitem4" class="col-xs-3"> Newest </ul>
</ul>
</li>
</ul>
</div>
</div>
I can not figure out why it is not going through the scroll bar. Please Help! :)
P.S. If you would like the full HTML go here: http://pastebin.com/c89M7MPk (it is a include), and the full CSS go here: http://pastebin.com/yJZp9HT2

Answer 1

That's just how overflow: scroll works. Even if you use overflow-x or overflow-y, you cannot mix this with overflow: visible in the same element.
The only thing you can do, is to use overflow-x: visible; overflow-y: hidden; for the CSS, and use javascript to scroll the element. Check out a library like this for the scroll: http://darsa.in/sly/

Answer 2

In the CSS, LINE 974 change margin-left:150px; to margin-left: 0px;