ロールオーバーについての疑問点

今日画像を２種類作って、ロールオーバーの練習をして画像置換には成功したのですが、画像と画像の間に空きができてしまいました。

　　

↓
無事に空きが埋まりました。CSSも修正しました。

　　

HTML

<div id="nav">
<ul>
<li><a href="#"><img src="images/nav_1.jpg" onmouseover="this.src='images/nav_1_on.jpg'" onmouseout="this.src='images/nav_1.jpg'" alt="ホーム"</a></li>
<li><a href="#"><img src="images/nav_2.jpg" onmouseover="this.src='images/nav_2_on.jpg'" onmouseout="this.src='images/nav_2.jpg'" alt="商品一覧"</a></li>
<li><a href="#"><img src="images/nav_3.jpg" onmouseover="this.src='images/nav_3_on.jpg'" onmouseout="this.src='images/nav_3.jpg'" alt="店舗紹介"</a></li>
<li><a href="#"><img src="images/nav_4.jpg" onmouseover="this.src='images/nav_4_on.jpg'" onmouseout="this.src='images/nav_4.jpg'" alt="お問合せ"</a></li>
</ul>
</div>

CSS

ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
display: inline;
float:left;
}