可変幅の親リスト項目の中央サブメニュー

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と正しく整列していません。上記のように示すサブメニューは、「子供」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%; 
} 

だから親liの中間点にULを取得し、（ボーダー= 174を含む）全体の幅の後、負の左余白の半分の50％を残しました。

更新：ここに例があります。 http://jsfiddle.net/mcpatriot/jzWcD/