title: jQuery SlimScroll Overflow issue with a Fixed Sidebar and BootStrap v3
body: <p>I am trying to develop a a page similar to the following: 
  <a href="http://jsfiddle.net/fatgamer85/677U8/7/" rel="nofollow noreferrer">http://jsfiddle.net/fatgamer85/677U8/7/</a></p>
  
  <p>I have a fixed sidebar div with a list of menu items which would popup out sub-menus or divs. I am using a jquery library called SlimScroller to create a facebook-styled scroller for the fixed sidebar div. I have another div on the side with a map in it and a div on the bottom which is a fixed footer.</p>
  
  <p>The page is laid out in such a way that the side bar takes 15% of the screen and the rest is occupied by the map area.</p>
  
  <p>When I hover over the list item in the sidebar, I wish to see the sub-menu pop out on hover. Due to overflow being hidden, this doesn't happen as shown in the image:</p>
  
  <p><img src="https://i.stack.imgur.com/oKdXC.png" alt="overflow hidden"></p>
  
  <pre><code>.page-sidebar {
      overflow: hidden;
  }
  </code></pre>
  
  <p>But when I force the overflow of sidebar to be visible using '!important' keyword I can see my sub-menu pop up on hover:</p>
  
  <p><img src="https://i.stack.imgur.com/V0VEo.png" alt="overflow forced to be visible"></p>
  
  <pre><code>.page-sidebar {
      z-index: 1000 !important;
      overflow: visible !important;
  }
  </code></pre>
  
  <p>I've tried to change the CSS on hover using JavaScript, but that doesn't work for some reason.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Is there a solution to make sure that the Sidebar Scrolls as well as I can get the pop over with or without using JavaScript?</p>
  
  <p>I currently have added the class .page-sidebar to make the popup appear. By doing so, the Sidebar doesn't scroll. If I remove the class .page-sidebar, the Sidebar Scrolls again, but this time the popup doesn't appear.</p>
  
  <p>What am I doing wrong?</p>