One of the challenges I've had in the past is to center a horizontal menu that is being driven by a content management system like Joomla. Because you don't know how many menu entries you'll have, you can't specify the width of the containing div and use "margin: 0 auto" to center one div inside another.

The solution is to float each of the elements so that they line up side-by-side. Then move the UL 50% to the left and move each of the LI elements -50%. As convoluted as this seems, it works.

#mainmenu ul

{

    float: left;
    left: 50%;
    margin-right: 0;
    padding-left: 0;
    padding-top: 0.6em;
    position: relative;

}

#mainmenu ul li

{
    left: -50%;
    position: relative;
}
 
In order to avoid horizontal scroll bars showing up, you also need to add the following to the main tag that wraps around your page.
 
overflow-x: hidden;