As you can see in the source code, the float of the main <li>s has been cleared again, by the first element after the navDiv container, in this case this paragraph. If not cleared, this text would start next to the navDiv. It doesn't matter that the <li> is of a lower order than this paragraph.

Dressing up the menu is best done by dressing up the <a>s. That way, you can easily get a cross-browser color-switching hover effect that includes a text color change. See the source code as well.

Keep in mind that if you are going to change the padding of or add border to the <a>s, to adjust the width of the <li>s accordingly. Centering the words of the links is done by giving the <li>s a text-align:center. Give the sub-list a different class if you want the main list words to be centered and the sub-list words to stay aligned left.

Centering the entire menu can be done in two ways. The first is to give the #navDiv a temporary border and such a width that it encloses the navMenu snugly. Next, remove the border and give #navDiv a margin:auto. For more information on margin:auto, see How to Center in CSS. The second method is an automatic but complicated method, discovered by Paul O'Brian and described here New tab.

This code has been tested thoroughly, in all browsers and browser versions, from IE6 to the latest Chrome version, and under all operating systems. If it doesn't work anymore once you implemented it in your website, you must have made a mistake. To avoid that, start from scratch, following all the steps in the tutorial, and make sure to test every change or addition. If a step doesn't go well, check for code errors with the HTML validator and the CSS validator (new tabs). Good luck!

Valid XHTML 1.0 Transitional