On “By Subject” or “By Media Type”, you can see it has a popout, which has a sub-menu of all the items. This is all good - apart from the fact its showing up partly behind the “caption” on the bootstrap carousel.
Ultimately its the z-index of the furthest positioned parent that creates the stacking context for all of its children (if such a parent exists). In your example #sidebar has a z-index of 2 so that means all children of the sidebar cannot overlap other elements on the page that are within contexts greater than 2. You need to set the z-index of #sidebar to be higher than the element you want to overlap.
#sidebar{z-index:11}
(As an aside remember that only positioned elements can have a z-index applied)