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 
}