Positioning of drop down to left - html

Question

I am trying to create 3 - tire drop down menu. I am positioning the third level sub menu to left of parent menu, but the top positions is no aligning properly.
below screen is the result i got.
css code:
/* 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;
}
How to align the top position exactly to parent menu position?
Please refer this for sample code: http://jsfiddle.net/asovbLqd/?

Answer 1

Please Chk URL enter link description here
#menu_new ul ul{
top:0px;
}
#menu_new li ul li{
position:relative;
}

Answer 2

EDIT: Also need to add position: relative to #menu_new li ul li.
For #menu_new ul ul, instead of top: auto, use top: 0.

Answer 3

To fix the Top for all sub menu, you need to provide "postion:relative to its parent element"
And to fix the Left extra space you need is to remove the default Padding from "<ul>" tag
Here is the Fiddle with both issues resolved "Top position and Left position":
http://jsfiddle.net/asovbLqd/14/
I have just changed the below:
Added position: relative; to the parent element of Sub Menu <ul>
#menu_new li ul li {
Text-Align: Left;
line-height:20px;
List-style-type:none;
border: 1px solid white;
position: relative;
}
And Removed Padding and margin from <ul> tags
#menu_new ul ul {
position: absolute;
top: 0;
left: 150px;
z-index: 10;
padding: 0;
margin: 0;
}
#menu_new li ul {
display: none;
margin: 0;
padding: 0;
}
Hope this will help!