html - 向左下拉的定位

Question

我正在尝试创建 3 - tire 下拉菜单。我将第三级子菜单定位到父菜单的左侧，但顶部位置没有正确对齐。

屏幕下方是我得到的结果。

CSS 代码:

/* the menu_new_new is the list, you don't need a wrapping div */
#menu_new{
    Text-Align: Left;
    /*width:100%;*/
    background:#194eb1;
   /* height:30px;*/
}

/* only mainmenu_new listitems */
#menu_new > li{
    display:inline-block;
    position:relative;
    line-height:35px;
}

/* links in mainmenu_new and both submenu_news */
#menu_new a{
    display:block;
    text-decoration:none;
    padding:0px 10px;
    color:#fff;
    text-align:Left;
}

/* submenu_news of both levels */
#menu_new li ul{
   position: absolute;
   top: 35px;
   left:0;
   min-width:150px;
   background: #194eb1;
  Text-Align: Left;


}
/* submenu text */
#menu_new li ul li{

  Text-Align: Left;
  line-height:20px;
  List-style-type:none;
  border: 1px solid white;
}
/* move the second level submenu_new to the right to don't overlap the parent submenu_new */
#menu_new ul ul{
    position: absolute;
    top:auto;
    left:150px; 
    Z-index: 10;  

}

/* hover effect for submenu_new links */
#menu_new li li a:hover{
   background:rgba(255,255,255,0.5);
}

/* hide all submenu_news for default */
#menu_new li ul{
    display: none;
}

/* show a submenu_new if the direct parent listitem is hovered */
#menu_new li:hover > ul{
    display:block;
}

如何使顶部位置与父菜单位置完全对齐？

示例代码请引用:http://jsfiddle.net/asovbLqd/ ？

Answer 1

请查网址 enter link description here

#menu_new ul ul{
   top:0px;
}
#menu_new li ul li{
   position:relative;
}