Question

I have a menu that I need to modify.
I need the drop down part of the menu to be [potentially] centered relative to it’s parent.

Yes, the menu sits on the right hand side of the page.

The 2nd level menu items will be displayed horizontally below the 1st level item.

eg.

        top level
bottom | level  | items

JSFiddle link:
http://jsfiddle.net/smxA8/

IMPORTANT: Notice that one of the 2nd level items is currently on 2 lines… needs to be on a single line.

Note: this is for a CMS. So, there are no fixed widths for any of this.
Users can add to the menu at any level without modifying the css.

Answer 1

In my opinion, there is no clean way to do that just using CSS. Because you need to have child’s width or use center aligns. So my suggestion is go for having some JS code.

Edition: Using JS which is available here: http://jsfiddle.net/Zqypz/