下拉菜单的定位

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

请清洁香港URL enter link description here

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

Answer 2

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

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

Answer 3

要解决的上衣全部子菜单，您需要提供“postion:relative到它的父元素”

并修复你需要的是左额外的空间从“<ul>”标签

这里删除默认填充是这两个问题的解决菲德尔“顶部位置，左侧POSI重刑“：

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 { position：absol尤特; top：0; left：150px; z-index：10; 填充：0; margin：0; }

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

希望这会有所帮助！