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 中，并尽可能将子菜单与父菜单栏项的水平中心对齐。例如，“菜单一”和“菜单七”由于父 div 的约束，无法与父 div 水平对齐。

有没有一种方法可以在不诉诸 JavaScript 的情况下做到这一点？