下拉到左侧的定位

Question

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

屏幕下方的

是我得到的结果。

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

编辑：还需要将position: relative添加到#menu_new li ul li。

对于#menu_new ul ul而不是top: auto，请使用top: 0。

Answer 2

请Chk网址enter link description here

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

Answer 3

要修复所有子菜单的Top，您需要向其“父元素”提供“postion:relative”

要修复左侧额外空间，您需要从“<ul>”标记中删除默认的填充

这是小提琴，两个问题都解决了“顶部位置和左侧位置”：

<强> http://jsfiddle.net/asovbLqd/14/

我刚刚更改了以下内容：

将position: relative;添加到子菜单<ul>

的父元素

#menu_new li ul li {
    Text-Align: Left;
    line-height:20px;
    List-style-type:none;
    border: 1px solid white;
    position: relative;
}

从<ul>标签中删除了填充和边距     #menu_new ul ul {         位置：绝对;         顶部：0;         左：150px;         z-index：10;         填充：0;         保证金：0;     }

#menu_new li ul {
    display: none;
    margin: 0;
    padding: 0;
}

希望这会有所帮助！