As you can see in the source code, the float of the <li>s has been cleared again, in the first element after the navDiv container, in this case this paragraph. 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. This includes adding padding. This 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 is easy as well. All you have to do is compute the total width of the menu, enter that width in the (to create) #navDiv style section, as well as margin:auto. For more information on margin:auto, see How to Center in CSS. For the total width just add the widths, paddings and borders.

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 probably made a mistake. To avoid that, do not mix this code with an existing menu code but 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