Question

I needed to create a drop down menu which would open up instead of down.
Going through this, I figured how to create a drop down and then modified it according to my requirement, finally resulting in this (fiddle).

I now wanted to make this drop down stick to the bottom of the page, so I changed the css of the container to position:absolute;bottom:0;. However, my drop down does not display correctly anymore, as shown here.

Can anyone please explain why this is happening and how to go about doing it correctly?

Thanks in advance. 🙂

EDIT:

Thanks to kei and bukfixart, I now used both the codes given below alternately with the same result: they work in IE9, but do not work (read: behave strangely) in Chrome or Firefox. You can see the bizarre behaviour here.
Note that this happens only when all 4 tabs are in the same line.

Can anyone please explain why this is happening??

Thanks in advance. 🙂

Answer 1

DEMO

In your jQuery, change it from

    submenu.css({
        position: 'absolute',
        top: $(this).offset().top - submenu.height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

to

    submenu.css({
        position: 'absolute',
        bottom: $("#container").height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });