Center submenu under parent list-items with variable widths - css

Question

Sorry I can't put this code live anywhere at the moment but hopefully the screenshots will help. I'm trying to precisely center a sub-menu ul beneath li's of variable width, like so:
Here's a truncated version of my layout:
<div class="nav">
<ul class="menu">
<li>
Home
</li>
<li>
Kids
<ul class="sub-menu">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>
Students
</li>
<li>
Adults
<ul class="sub-menu">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul
</li>
</ul>
</div>
I have the arrow on the sub-menu working and aligned to the center of the sub-menu ul, but the sub-menu itself isn't aligning correctly with its parent li, as you can see here. The sub-menus showing are for the "kids" li and the "adults" li, as above:
This is the relevant code, I believe. Any help is MUCH appreciated!
.menu li {
display:inline-block;
list-style-type: none;
position: relative;
}
.menu li a {
background:url("_/images/nav-cross-home.png") 50% 5px no-repeat;
display:inline-block;
padding:30px 5px 2px;
text-transform: uppercase;
text-decoration: none;
color:#000;
font-family:proxima-nova, Arial, Helvetica, sans-serif;
font-weight:700;
font-size:.9em;
margin: 0 auto 10px;
}
.nav ul ul {
display: block;
position: absolute;
margin: 10px 0px 0px -15px;
top: 3.333em;
left: -125%;
width: 170px;
z-index: 99999;
border:2px solid #929292;
}
.nav ul.menu ul.sub-menu a {
background: #fff !important;
border-bottom: 1px solid #e5e5e5;
color: #444;
font-size: .9em;
text-transform: none;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 150px;
margin-bottom:0px;
}

Answer 1

Here you go.
.nav ul ul {
margin-left:-87px;
left: 50%;
}
So left 50% gets the ul to the mid point of the parent li, and then negative left margin half of the total width (including borders = 174).
Update: here's an example. http://jsfiddle.net/mcpatriot/jzWcD/