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;