Aligning drop-down menu in CSS - html

Question

I can't seem to make the drop-down <ul> align with it's parent <li>.
What am I doing wrong?
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {display: block;
position:absolute;
}
Fiddle

Answer 1

ul elements have a default padding-left value applied by the user-agent, so by removing that you get the alignment you asked for (There is also a margin added by you, but I'm gonna ignored it since you've added it yourself).
#toolbar ul {
padding-left: 0;
}
or (if you want to target only the sub-menu):
#toolbar ul ul {
padding-left: 0;
}
Demo

Answer 2

What adonis said was absolutely correct. There are certain other elements which take default padding and margin. So try using reset before styling any element.
*{margin:0;padding:0;}
if no list item of your page wants default bullets you may also include list-style:none in the above reset lines of code.

Answer 3

There is margin and padding in this case (you add the margin yourself) which is affecting it.
View here for a fix
(this has outlines for more visual proof)
CSS:
#toolbar ul {
padding: 0;
list-style-type:none;
}
#toolbar ul > li {
display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {
display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul ul > li {
margin: 0;
}

Answer 4

Try this one i have pasted the code here
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul li:hover ul li{
margin-left: -30px;
}