How to set up overflow in twitter bootstrap dropdown list with submenus?

Question

I have a problem with css overflow property for twitter bootstrap dropdown component with submenus.

When setting max-height and overflow to auto the scrollbar appears in the list as it should, but submenus go inside the drop down list under horizontal scroll, which is not what I need.

Here is the example of this issue.

http://jsfiddle.net/ftMhv/1/

I've tried changing values overflow-x and overflow-y, but none of them worked well.

Answer 1

When using overflow in the matter you described it will hide all children within it. Unfortunately there really is no way around it.

Why do you need a scrolling navigation dropdown? Is it because it is too long?

I would suggest trying a columned approach if that is the case. Have <div>'s within an <li> that have float: left; and then place submenus within them.

Sorry, but I think this is the only answer to your issue.

Edit: You could use javascript and jquery to create a floating absolutely positioned container that displays at the coordinates of the user's mouse. That will probably get pretty hairy and complicated though.