jquery drop down menu positioning

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 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?

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
    });