I have the following CSS/HTML setup http://jsfiddle.net/UDAUY/

How do I align the drop down menu field to center itself under the parent tab like this

| MENU 1 | MENU 2 | MENU 3 | MENU 4 | ------------------------------------- | Field 1 | Field 2 | ---------------------

instead of this,

| MENU 1 | MENU 2 | MENU 3 | MENU 4 | ------------------------------------- | Field 1 | Field 2 | ---------------------

which is how it looks right now. Also, can I set the width of the submenu ul container to adjust dynamically? Right now, I've set it to an arbitrarily high value, which works for all practical purpose, but would like to know if this is possible.

EDIT

I've added a bounty in the hopes of attracting better answers. I'm looking for a CSS only approach (no JS), and with relative units, not absolute. Also, the number of fields shouldn't matter (You don't have to worry about extremely long/wrapping issues.. However, changing from 2 to 4 shouldn't alter the centering).