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

Tags: html,css,css3,drop-down-menu

Problem :

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?

---

Solution :

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.