How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

Question

I don't know how to formulate my question perfectly, so I made a (quick) example so will illustrate my problem exactly : http://jsfiddle.net/kn5GT/1/

If the last item is near the bottom and you hover it, the submenu will be displayed like the other, but this will extend the height of the page, thus showing the vertical scrollbar of the browser.

I'd like to avoid that by making all dropdown that would extend the height of the page by showing not from the up, but from the bottom (the bottom of the submenu would be near the end).

Is this possible only in CSS or do I have to put some js in it?

Gut feeling is that you're going to need JavaScript, but there might be CSS available I'm unaware of... so I am not going to "answer" — freefaller
– freefaller, Commented Jul 13, 2012 at 8:29
I'm in the same state of mind :) Pretty sure only JS can do it, but maybe I don't know about a magic css property :) — Cyril N.
– Cyril N., Commented Jul 13, 2012 at 8:36

Christoph · Accepted Answer · 2012-07-13 08:55:51Z

2

this might not be the best solution, but you could fix this with a little help of the css-pseudoclass nth-last-of-type().

I have modified your fiddle (the borders are just there for better visual distinction.)

I just added the following rule:

ul>li:nth-last-of-type(-n+2)>div {
    top:auto;
    bottom: 50px;
}

Don't get confused by the strange selector, essentially (-n+2) makes the last 2 Submenus pop up from the bottom instead from the top.

answered Jul 13, 2012 at 8:55

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christoph Over a year ago

@Cyril I added an additional rule for a nicer transition in the middle element, check out this fiddle (You have to adapt your arrows though)

Collectives™ on Stack Overflow

How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related