menu expands a little to the right - html

Question

My menu is expanding a little to the right, and i can't find the cause. I am new to coding.
If i put the #nav ul ul position to relative, it expands the menu cell, if i put it to absolute i doesn't do that, but the menu appears under the next menu cell.
this is my .HTML
<div id="navWrap">
<div id="nav">
<ul>
<li>Home </li>
<li>Meniu 1
<ul>
<li>Sm1.1</li>
<li>Sm1.2</li>
<li>Sm1.3</li>
</ul>
</li>
<li>Meniu 2
<ul>
<li>Sm2.1</li>
<li>Sm2.2</li>
<li>Sm2.3</li>
</ul>
</li>
<li>Meniu 3
<ul>
<li>Sub meniu 3.1</li>
<li>Sub meniu 3.2</li>
<li>Sub meniu 3.3</li>
</ul>
</li>
<li>Meniu 4
<ul>
<li>Sub meniu 4.1</li>
<li>Sub meniu 4.2</li>
<li>Sub meniu 4.3</li>
</ul>
</li>
<li>Meniu 5
<ul>
<li>Sub meniu 5.1</li>
<li>Sub meniu 5.2</li>
<li>Sub meniu 5.3</li>
</ul>
</li>
<li>Meniu 6
<ul>
<li>Sub meniu 6.1</li>
<li>Sub meniu 6.2</li>
<li>Sub meniu 6.3</li>
</ul>
</li>
</ul>
<br class="clearleft"/>
</div>
</div>
and this is my .CSS
#navWrap {
height:30px;
background:#0d364c;
margin:0px;
padding:0px;
width:705px;
}
#nav {
padding:5px;
margin:0px;
background:#0d364c;
height:25px;
font-size:15px;
width:700px;
}
#nav ul {
margin: 0px;
padding: 0px ;
list-style: none;
position: relative;
display: block;
}
#nav ul:after {
content: "";
clear: both;
display: block;
}
#nav li {
padding:5px 0px;
background-color: #0d364c;
margin: 0 0 0 0;
color: #FFF;
list-style-type: none;
border-right: 1px solid #fff;
display:inline;
font-family:sans-serif;
height:30px;
width:70px;
}
#nav li:last-child{
border-right:none;
}
#nav li a {
color: #FFF;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
background:#577283;
}
#nav ul ul {
display:none;
border-radius: 0px;
padding: 2px;
position: absolute;
height:30px;
background:black;
top:30px;
}
#nav ul li:hover>ul{
display:inline-table;
float:none;
}
#nav ul li:hover{
background:#577283;
}
#nav ul ul li {
position: relative;
float:none;
border:0px;
padding:0px;
width:70px;
}
#nav ul ul li a {
display: block;
text-decoration: none;
height:40px;
width:70px;
color: white;
background:gray;
text-align:center;
padding: 5px;
margin: 1px;
}
here is my JsFiddle http://jsfiddle.net/tHUWc/
Thank you, Iosif

Answer 1

Set #nav li { position: relative; } and #nav ul ul { left: 0; }
Example:
http://jsfiddle.net/tHUWc/2/

Answer 2

Have you tried using float. I fixed the "expanding to the right" by floating the #nav
See this example http://jsfiddle.net/monnoval/tHUWc/3/