Comments on: Centering a dropdown menu

By: Frank

Frank — Sat, 07 Nov 2009 19:08:41 +0000

One addition, to make the conditional comment with display: inline-block and so on work in ie the element within the

tags must be display: block, else the whole navigation floats left.

By: Frank

Frank — Sat, 07 Nov 2009 18:29:54 +0000

Hi, thanks, this article is a great help and saved me many hours of work. Just a display: table; for the ul did the job for me.

By: Karen M. Sullivan

Karen M. Sullivan — Wed, 04 Nov 2009 21:58:45 +0000

This is wonderful. Thank you!!

Karen

By: John Faulds

John Faulds — Wed, 09 Sep 2009 22:41:48 +0000

Sounds like a good idea.

By: Mark B.

Mark B. — Wed, 09 Sep 2009 22:34:43 +0000

I’ll give it a go but I also figured a different method. Since the only time I won’t know the number of items is on a dynamic menu, I can use the script to count the number of items and add a specific width to the unordered list.

By: John Faulds

John Faulds — Wed, 09 Sep 2009 20:50:26 +0000

Hi Mark, if you don’t know the number of items you can use the table display method which doesn’t require setting a width on the parent, but you’d need to consider what would happen if too many items were added to fit the space, i.e, would they wrap or stick out or be hidden.

By: Mark B.

Mark B. — Wed, 09 Sep 2009 19:26:59 +0000

What if you don’t know the total number of items in the menu?

By: John Faulds

John Faulds — Wed, 09 Sep 2009 02:45:02 +0000

Allan, the float is required to contain the floated elements within it so that the background extends the full width of the available area. I usually use overflow:hidden to contain floats but can’t do that in this case because hiding the overflow would prevent the submenus from showing.

By: allan

allan — Wed, 09 Sep 2009 02:34:32 +0000

hi John!
This post is very most useful! I have a problem that you give the last sample in the post.
Why diy you need to applied to behave float:left within #nav? it works fine in Firefox 3.5 and IE 7.
if i remove it(float:left), It doesn’t work in Firefox 3.5.
I’d be very thankful if you answer to this question!

By: Libai

Libai — Thu, 28 May 2009 04:03:41 +0000

Would just like to say this is ABSOLUTELY AMAZING!!! I’m so happy that we can make centered suckerfish dropdowns easily in the future. Thank you so much for your hard work! Thank you, thank you, thank you! ^_^