jquery drop down menu positioning

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

kei · Accepted Answer · 2012-12-21 19:47:15Z

3

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

answered Dec 21, 2012 at 19:47

kei

20.5k2 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kei Over a year ago

@Fahad That's more of a CSS issue. Just add #container { width:100%; } updated demo

Fahad Over a year ago

Thanks alot :) if its not too much trouble, can you please explain the issue so I don't make the same mistake in future? I did not really understand it.

bukart · Accepted Answer · 2012-12-21 19:48:56Z

2

There's a simple reason for this.

You should replace your code with this

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

(removed the height of the parent). You gave the parent a absolute positioning. So the childs are oriented at the parents position. In this case the height isn't neccessary in the calculation

Just give the #container element always a relative or absolute position, and you can use the fixed script in all cases

answered Dec 21, 2012 at 19:48

bukart

4,9162 gold badges23 silver badges40 bronze badges

1 Comment

Fahad Over a year ago

Sorry for the late reply. Thanks for the solution. One problem though, now. If you open jsfiddle.net/ZC4sz/2 (fiddle with your suggestion) and expand the result window enough such that all 4 tabs are visible at once, and now hover upon the div, the layout breaks, and Tab 4 comes below the first tab. This happens only in Chrome though, works okay in IE9.

Collectives™ on Stack Overflow

jquery drop down menu positioning

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related