меню немного расширяется вправо

Мое меню немного расширяется вправо, и я не могу найти причину. Я новичок в кодировании.

Если я поместил позицию #nav ul ul в относительную, она расширяет ячейку меню, если я ставлю ее абсолютной, я этого не делаю, но меню появляется под следующей ячейкой меню.

это мой.HTML

<div id="navWrap">
        <div id="nav">
            <ul>
                <li><a href="#" class="smoothScroll">Home </a>&nbsp;&nbsp;</li>
                <li><a href="#" class="smoothScroll">Meniu 1</a>
                    <ul>
                        <li><a href="#">Sm1.1</a></li>
                        <li><a href="#">Sm1.2</a></li>
                        <li><a href="#">Sm1.3</a></li>
                    </ul>
                </li>
                <li><a href="#" class="smoothScroll">Meniu 2 </a>
                    <ul>
                        <li><a href="#">Sm2.1</a></li>
                        <li><a href="#">Sm2.2</a></li>
                        <li><a href="#">Sm2.3</a></li>
                    </ul>
                </li>
                <li><a href="#" class="smoothScroll">Meniu 3 </a>
                    <ul>
                        <li><a href="#">Sub meniu 3.1</a></li>
                        <li><a href="#">Sub meniu 3.2</a></li>
                        <li><a href="#">Sub meniu 3.3</a></li>
                    </ul>
                </li>
                <li><a href="#" class="smoothScroll">Meniu 4 </a>
                    <ul>
                        <li><a href="#">Sub meniu 4.1</a></li>
                        <li><a href="#">Sub meniu 4.2</a></li>
                        <li><a href="#">Sub meniu 4.3</a></li>
                    </ul>
                </li>
                <li><a href="#" class="smoothScroll">Meniu 5 </a>
                    <ul>
                        <li><a href="#">Sub meniu 5.1</a></li>
                        <li><a href="#">Sub meniu 5.2</a></li>
                        <li><a href="#">Sub meniu 5.3</a></li>
                    </ul>
                </li>
                <li><a href="#" class="smoothScroll">Meniu 6 </a>
                    <ul>
                        <li><a href="#">Sub meniu 6.1</a></li>
                        <li><a href="#">Sub meniu 6.2</a></li>
                        <li><a href="#">Sub meniu 6.3</a></li>
                    </ul>
                </li>
            </ul>
            <br class="clearleft"/>
        </div>
    </div>

и это мой.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;    
}

вот мой JsFiddle http://jsfiddle.net/tHUWc/

Спасибо, Иосиф