I have a similar dropdown menu structure using <ul>s, which is wrapped in two divs - an outer and an inner - namely navtop and navtop2 respectively.
To control the layout, I created a special css file called stylesheet_headerfooter.css which contains amongst other things:
Code:
#navtop {
z-index:1;
width:98%;
margin:0 auto;
padding-top:0.5em;
color:#fff;
font-weight:normal;
font-size:1.0em;
text-align:center;
}
.navtop2 {
width:30.8em; /* adjust to fit */
margin:0 auto;
text-align: center;
}
.navtop2 ul {
padding-top:0.5em;
margin:0 auto;
}
The only problem I have encountered with this is when the navtop width is less than the navtop2 width, such as on small screens like mobile phones, the menu wraps with unintended consequences.
In your case, you could try adding the inner div and changing
text-align: center;
to
text-align:justify;
Hope this helps