CSS centering on smaller parent element

A client's designer handed me a PSD with this layout aspect, and i can't figure out how to do it in CSS. I was about to resort to an annoying javascript solution but I thought I'd ask you guys first.

I've got a set of horizontal <li> elements, each with a <ul> submenu nested inside . The submenus need to pop up, still with horizontal positioning. Not too bad. However, the problem is that I need to center each submenu <ul> on the button it descends from. So the parent button is maybe 100 px wide, but the submenu could be anywhere from 150 to 500, with variable # of elements each of variable width.

I've diagrammed the problem in an image that I attached below. Please take a look; any suggestions on how to do this would be greatly appreciated.

Gracias,
Evan

(Edit: for great spelling!)

If the top level menu is left aligned(read it from the attached image), then how do you center the submenu of the left most main elements(or of the first one)?
Try something like http://www.cssplay.co.uk/menus/drop_line.html

If the top level menu is left aligned(read it from the attached image), then how do you center the submenu of the left most main elements(or of the first one)?
Try something like http://www.cssplay.co.uk/menus/drop_line.html[/QUOTE]

The top level menu is left aligned, but not to the left edge of the page. It starts about 30% away from the left edge and then extends to the right, and it can be anywhere from 4 to 6 buttons.

So there is room (on the page anyway) for the sub-menu to extend past the left margin of the top menu, which is the way the designer has drawn it. :(

The one you linked just aligns all the submenus with the left edge of the parent <ul>. This unfortunately will look pretty bad in some of the cases where the 3rd or 4th button only has 1 submenu item.