title: Center submenu under parent list-items with variable widths
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/cqECf.png" alt="Centered submenu"></p>
  
  <p>Here's a truncated version of my layout:</p>
  
  <pre><code>&lt;div class="nav"&gt;
    &lt;ul class="menu"&gt;
       &lt;li&gt;
            &lt;a href=""&gt;Home&lt;/a&gt;  
       &lt;/li&gt;
       &lt;li&gt;
            &lt;a href=""&gt;Kids&lt;/a&gt;
            &lt;ul class="sub-menu"&gt;
                &lt;li&gt;&lt;a href=""&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;
            &lt;a href=""&gt;Students&lt;/a&gt;  
       &lt;/li&gt;        
       &lt;li&gt;
            &lt;a href=""&gt;Adults&lt;/a&gt;
            &lt;ul class="sub-menu"&gt;
                &lt;li&gt;&lt;a href=""&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul
       &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/DtdIU.jpg" alt="Current state of affairs"></p>
  
  <p>This is the relevant code, I believe. Any help is MUCH appreciated!</p>
  
  <pre><code>.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;
  }
  </code></pre>