Problems with nested menu items using nav-pills

I have a Nested sidebar menu like below

About Us
- Mission Statement
- Vision
Photo Gallery
Contact Us

The menu is in a sidebar with has the class col-lg-2 and the main content has the class col-lg-10 .... so the sidebar is pretty thin.

When I hover over "About Us" I find two other nested menu items (Mission Statement and Vision). However, they quickly disappear as soon as I drag my mouse to click on the link. So I have to try multiple times, over and over again until I can click on the two menu items.

three solutions to this problem (that I can think of)

1) Add delay to hover
2) Display "Mission and Vision" when I click on "About Us" instead of hovering
3) Display a very simple nested menu item as shown above without any dropdown - while retaining the bootstrap style

Has anybody run into this? How did you solve it?

Thanks!!

-arrehman1