Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

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?

Problem courtesy of: Cyril N.

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.

Solution courtesy of: Christoph

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×