Centering my css3 menu of changing widths...? - php

Question

I have a css menu which has a width of 400 for non-Admins... and a width of 500 for Admins. If I set the UL width to 500, the menu centers fine and nicely for Admins. But for non-admins, whose mneu is really only 400 wide... it's off-kilter.
So I removed the width attribute from the UL to try and remove this and then it lost centering altogether; the whole menu is now stuck to the left side of the container.
Anyone have a simple idea for how to make it always centered? Site is here:
http://www.runic-paradise.com/
ul.menu{
height: 40px;
list-style: none outside none;
margin: 0 auto;
/*width: 500px;*/
}
/*li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}*/
a.menu{
color:#FFF;
text-decoration:none;
}
p.menu{
padding-top: 10px;
padding-right: 5px;
padding-left: 5px;
}
.subtext{
padding-top: 10px;
}
ul.menu li{
width: 100px;
height: 40px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}
.yellow{
background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}
.red{
background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}
.purple{
background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}
.blue{
background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}
<ul class="menu">
<li class="green">
<p class="menu">Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p class="menu">-</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p class="menu">Forums</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p class="menu">-</p>
<p class="subtext">Send us your stuff!</p>
</li>
<?php
if ($user->data['group_id'] == 5)
{
echo ' <li class="purple">
<p class="menu">Admin</p><p class="subtext">Legal things</p>
</li>';
}
?>
</ul>

Answer 1

Your CSS sets the ul.menu width to 400px. If the user is admin, the php script adds another 100px wide li to ul.menu. When this happens, you have to set the ul.menu width to 500px. If you do this, the css rule margin:0px auto; will handle the centering as expected.
A simple jQuery fix would be something like this:
<script>
$(document).ready(function() {
var menu=$('ul.menu');
if(menu.find('li')>4) {
//if there are more then 4 menu items, reset menu width to 500px
menu.css('width','500px');
}
});
</script>

Answer 2

Use max-width:500px;for UL.Demo for these http://jsfiddle.net/dhanith/ZMB93/

Answer 3

Can you please try this,
In animated-menu.css (demo url: http://www.runic-paradise.com/), Change margin style as like below
ul.menu {
height: 40px;
list-style: none outside none;
margin: auto 25%;
}