Centering and keeping centered a Horizontal dropdown Menu

Question

I've created a fixed, 100% width nav bar that spans the top of my page; the only problem is I can't get the drop down menu headings to stay centered as the page is resized, or, for that matter, at all... they're floated left at the moment.

Here's the full screen result and the code .

Everything I have tried so far has been breaking the drop-down menu attachments to the menu headings.

Thanks for the help,
Link

Answer 1

You already have text-align:center on the ul . That's a good start. Now just add this:

#menu li {
    display:inline-block;
    float:none; /* or just remove the float */
}

This will center the nav items, but get rid of this too:

#menu {
    left: -20px;
}

That's breaking the layout and making the first link unclickable.

You also have some extra padding being applied on :hover , or something that's making the list items "jump". I'd suggest addressing that as well so the links don't move around.