居中子菜單下的父寬度可變寬度項目

Question

對不起，我不能把此代碼現在的任何地方，但希望截圖將有所幫助。我想正是中心的子菜單UL李的可變寬度的下方，就像這樣：

這裏是我的佈局的刪減版本：

<div class="nav"> 
    <ul class="menu"> 
    <li> 
      <a href="">Home</a> 
    </li> 
    <li> 
      <a href="">Kids</a> 
      <ul class="sub-menu"> 
       <li><a href="">Sub-item 1</a></li> 
       <li><a href="">Sub-item 2</a></li> 
      </ul> 
    </li> 
    <li> 
      <a href="">Students</a> 
    </li>   
    <li> 
      <a href="">Adults</a> 
      <ul class="sub-menu"> 
       <li><a href="">Sub-item 1</a></li> 
       <li><a href="">Sub-item 2</a></li> 
      </ul 
    </li> 
    </ul> 
</div> 

我上有箭頭子菜單工作並與子菜單ul的中心對齊，但是子菜單本身沒有與其父母li正確對齊，如您在此處所看到的。子菜單顯示都爲「孩子們」裏和「大人」裏，如上：

這是相關的代碼，我相信。任何幫助深表感謝！

.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

你在這裏。

.nav ul ul { 
    margin-left:-87px; 
    left: 50%; 
} 

所以左50％得到了ul到中點父裏，然後總寬度的負左邊距的一半（包括邊界= 174）。

更新：這裏是一個例子。 http://jsfiddle.net/mcpatriot/jzWcD/