这是我的布局的截断版本：

  
     
          Home       
     
          Kids          
              
Sub-item 1
              
Sub-item 2
          
     
     
          Students       
             
          Adults          
              
Sub-item 1
              
Sub-item 2
          
  

我有子菜单上的箭头工作并与子菜单ul的中心对齐,但子菜单本身与其父li没有正确对齐,正如您在此处所见.显示的子菜单适用于“kids”li和“adult”li,如上所示：

我相信这是相关的代码.任何帮助深表感谢！

.menu li {    display:inline-block;    list-style-type: none;    position: relative;}.menu li a {    background:url("_/images/nav-cross-home.png") 50% 5px no-repeat;    display:inline-block;    padding:30px 5px 2px;    text-transform: uppercase;    text-decoration: none;    color:#000;    font-family:proxima-nova, Arial, Helvetica, sans-serif;    font-weight:700;    font-size:.9em;    margin: 0 auto 10px;}.nav ul ul {    display: block;    position: absolute;    margin: 10px 0px 0px -15px;    top: 3.333em;    left: -125%;    width: 170px;    z-index: 99999;    border:2px solid #929292;}.nav ul.menu ul.sub-menu a {    background: #fff !important;    border-bottom: 1px solid #e5e5e5;    color: #444;    font-size: .9em;    text-transform: none;    height: auto;    line-height: 1.4em;    padding: 10px 10px;    width: 150px;    margin-bottom:0px;}

.nav ul ul {    margin-left:-87px;    left: 50%;}

所以左边50％得到ul到父李的中点,然后是负左边距总宽度的一半(包括边界= 174).

更新：这是一个例子. http://jsfiddle.net/mcpatriot/jzWcD/