Extra padding under menu with child - css

Question

hey guys I am having a few issues with my menu, theres a weird padding that pushes my menu to the right a few pixels but I managed to fix it on the main parents, originally they were both pushing out the same amount.
Pic
and heres a better view
I am running through my css and adding padding-left:0px;
Heres my code if anyone can assist me.
<div class="css_menu_two_line">
<ul class="two_line_menu">
<li>Menu 1</li><li>
Menu 2</li><li class="current">Menu 3 SHOW
<ul>
<li>Submenu 3-1</li>
<li>Submenu 3-2</li>
<li>Submenu 3-3</li>
<li>Submenu 3-4</li>
<li>Submenu 3-5</li>
</ul>
</li><li>Menu 4</li><li>Menu 5</li>
</ul>
</div>
css:
.css_menu_two_line {
width:100%;
overflow:hidden;
}
.two_line_menu {
padding-left: 0;
position: relative;
margin-bottom: 40px;
background:#77f url('img_bg.gif') repeat-x;
}
.two_line_menu a {
display: block;
color: #fff;
text-decoration: none;
padding:10px;
}
.two_line_menu li:hover a {
color: #fff;
background: #aaf;
}
.current a {
color: #fff;
background: #aaf;
}
.two_line_menu li { display: inline-block; }
.two_line_menu li ul { display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px; }
.two_line_menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
}
.two_line_menu li ul li:hover a { color: #000; }
fiddle: http://jsfiddle.net/uf2cnakc/

Answer 1

You need to take away the padding from .two_line_menu li ul. To do this we can add the following style padding: 0;.
A lot of HTML elements have default styles, so beware of this.
Your CSS for this class should now look something like this:
.two_line_menu li ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
padding: 0; /* Just added */
}
Demo Here

Answer 2

Your CSS contained display:inline which has block child element and position absolute as well. Try this CSS property.
.two_line_menu li { display: block; float:left; }
.two_line_menu li ul{ position:absolute; left:0; padding:0; width:100%; background: #aaf; top:38px; }
.two_line_menu li ul li{ float:left;}