CSS對齊下拉菜單到對齊菜單

Question

我有問題讓下拉菜單在我的網站上正確對齊。從這裏可以看出（http://jsfiddle.net/rjgunning/ehjm3t9s/2/）

下拉菜單的父菜單是完全正確的。在完全證明這一切正確對齊之前。 向左浮動似乎不會使下拉菜單與父列表元素的左側對齊。我目前正在使用margin-left: 120px

任何人都可以看到我錯過了什麼嗎？

這是我的菜單中選擇相關CSS

nav#subnav ul.menu { 
    width: 100%; 
    text-align: justify; 
    list-style: none; 
} 
nav#subnav ul.menu li.menu-item { 
    width: auto; 
    display: inline; 
    float:none; 
} 

/* --- Drop-down Menu --- */ 
nav#subnav ul.menu li.menu-item ul.sub-menu{ 
    position: absolute; 
    display: none; 
} 

nav#subnav ul.menu li.menu-item:hover ul{ 
    display: block; 
} 

nav#subnav ul.menu li.menu-item:hover ul.sub-menu li.menu-item{ 
    float: left; 
    margin-left: 120px; /* Needs fixed properly*/ 
} 

nav#subnav ul.menu:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

菜單的html：

<nav id="subnav"> 
    <div class="menu-sub-menutmp-container"> 
     <ul id="menu-sub-menutmp" class="menu"> 
      <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li> 
      <li id="menu-item-51" class="menu-item menu-item-has-children"><a href="...">About the MCR</a> 
       <ul class="sub-menu"> 
        <li id="menu-item-1015" class="menu-item"><a href="...">Committee 2014/15</a></li> 
        <li id="menu-item-1116" class="menu-item"><a href="...">Contact</a></li> 
       </ul> 
      </li> 
      <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li> 
      <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li> 
      <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li> 
      <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li> 
      <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li> 
</ul></div> </nav> 

編輯：加入HTML菜單 EDIT2：添加的jsfiddle例如

Answer 1

固定它

需要添加

nav#subnav ul.menu li.menu-item-has-children { 
    position: relative 
}