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 :

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 {
    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.

    CSS Howto..

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How do I vertically align multiple text next to an image with CSS?

    How do I override the default layout

    How often is the default font size in the browser not 16px?

    How to add your customise arrows in slick slider JS using CSS

    How to create page breaks automatically in CSS?

    How to vary shade of specific table row id

    How to position tables in ie 9 using css?

    layout - show the latter coded div at top without absolute positioning

    How do you determine whether a CSS property requires browser specific prefixes?

    how to write .html with .css to custom color text

    How to get a jQuery modal overlay to not push the scrollbar around?

    how can i update these css classes to generate a blue box behind the first letter of a word?

    How might I get an element's border color value using jQuery?

    How to make css smaller?

    How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

    How volume button is generated [closed]

    CSS - How to align 2 fields into 1 row?

    CSS: How do I get wrapped labels to align

    how to make a h2 background image 'dynamic' in height as well

    How to get rid of white space between css horizontal list items? [duplicate]

    How to change property of a specific CSS pseudo element?

    How to create a standing up 3D text effect with Css3 transforms

    How to avoid jquery library from effecting my css

    CSS - Absolute position , how to ignore left and top of parent

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

    How do i use floats for images while using
    so that
    still shows under image?

    How to center align ion icon inside button?

    How to put a ribbon image on another image with css?

    How to Dynamically Fit image in screen using css