5

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.

Florent
  • 12,310
  • 10
  • 49
  • 58
nextstopsun
  • 443
  • 7
  • 14
  • You might want to try some jQuery plugin like this: http://www.smoothdivscroll.com/ However, I still haven't figured out how to apply it. – keaukraine Sep 19 '12 at 13:27
  • 1
    well the reason overflow-x and overflow-y weren't working well is probably because of this http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causes-scroll-bar . Also what is your ideal behavior? – hajpoj Sep 20 '12 at 06:52
  • @hajpoj Yes, I also believe that this is the underlying problem of this question. That's why I proposed to use some JS plugins instead of scrolling with `overflow` property. – keaukraine Sep 20 '12 at 08:14
  • @hajpoj The ideal behavior is when the first-level menu scrolls down, and the second level is shown to the left outside the main list, as it is supposed to be. Here's a fork without overflow option: http://jsfiddle.net/pNGtQ/ I need just the same but with vertical scroller – nextstopsun Sep 21 '12 at 07:21

1 Answers1

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.

AJStacy
  • 5,175
  • 4
  • 17
  • 31