html - CSS ドロップダウン メニューの配置

Question

順序付けられていないリストで構築されたメニュー バーがあります。リスト項目ごとに、マウスオーバーで表示されるサブメニューがあります。

<div class="MainContainer">
<ul class="menu">
  <li class="menuTab">Menu One
    <div class="menuDropDown">

      <div class="menuDropDownColumn">  
        <h2><a href="#">Drop Down Heading</a></h2>
        <ul>
          <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
        </ul>
      </div>

      <div class="menuDropDownColumn">
        <h2><a href="#">Drop Down Heading</a></h2>
        <ul>
          <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
        </ul>
      </div>

    </div>
  </li>
</ul>
</div>

CSS:

.menuDropDown {
  position: absolute;
  left:-999em; /* Hides the dropdown until menuTab mouseover */
  z-index: 1;
}

.menuTab:hover .menuDropDown {
  left:inherit; /* Shows the sub-menu */ 
}

jsFiddle の完全なマークアップ

いくつかの表示の問題を解決するのに問題があります。サブ メニューの位置を 'mainContainer' div に制限し、サブ メニューを可能な限り親メニュー バー項目の水平方向の中央に揃えたいと思います。たとえば、「Menu One」と「Menu Seven」は、親 div の制約により、親 div と水平方向に整列できませんでした。

JavaScriptに頼らずにこれを行う方法はありますか?