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 */ 
}

Full markup on jsFiddle

我在解决一些显示问题时遇到问题。我希望子菜单的位置被约束到'mainContainer'div，并且子菜单在可能的情况下与父菜单栏项的水平中心对齐。例如，由于父div的约束，'Menu One'和'Menu Seven'无法与父div水平对齐。

有没有办法可以在不使用javascript的情况下完成此操作？