javascript - 固定サイドバーと BootStrap v3 での jQuery SlimScroll オーバーフローの問題

Question

次のようなページを開発しようとしています: http://jsfiddle.net/fatgamer85/677U8/7/

サブメニューまたは div をポップアップするメニュー項目のリストを含む固定サイドバー div があります。SlimScroller という jquery ライブラリを使用して、固定サイドバー div 用の Facebook スタイルのスクローラーを作成しています。側に別の div があり、その中に地図があり、下部に固定フッターである div があります。

このページは、サイド バーが画面の 15% を占め、残りがマップ エリアで占められるようにレイアウトされています。

サイドバーのリスト項目にカーソルを合わせると、ホバー時にサブメニューがポップアップ表示されるようにしたいと考えています。オーバーフローが隠されているため、これはイメージに示すようには発生しません。

.page-sidebar {
    overflow: hidden;
}

しかし、「!important」キーワードを使用してサイドバーのオーバーフローを強制的に表示すると、ホバー時にサブメニュー ポップアップが表示されます。

.page-sidebar {
    z-index: 1000 !important;
    overflow: visible !important;
}

ホバー時のCSSをJavaScriptで変更しようとしたのですが、なぜかうまくいきません。

編集：

JavaScript を使用して、または使用せずに、サイドバーのスクロールとポップオーバーを取得できるようにするソリューションはありますか?

現在、ポップアップを表示するためにクラス .page-sidebar を追加しました。そうすることで、サイドバーがスクロールしなくなります。クラス .page-sidebar を削除すると、サイドバーは再びスクロールしますが、今回はポップアップが表示されません。

私は何を間違っていますか？