Html 如何调整悬停图像上的CSS列表

我有一个CSS/HTML列表，它使用一个图像作为背景，鼠标悬停时使用另一个图像

唯一的问题是悬停图像没有正确对齐，并且有一个很小但可以注意到的间隙

我有

我还将Blueprint CSS用作CSS框架。 下面是源代码

和往常一样，先谢谢你

#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}

#navbar ul{ 
list-style: none;
margin:0;
padding:0;
}

#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding-bottom:  1px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px; 
}

#navbar li:hover{
background-image: url('../images/navbar-selected.png'); 
background-repeat: repeat-x;
 }  

<div class="container" id="container">
    <div class="prepend-top">
        <div class="clear" id="navbar">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="stock.php">Start HaardHout Vergikelleen</a></li>
                <li><a href="overview.php">In Jouw Regio</a></li>
            </ul>   
        </div>  
    </div>
</div>

#导航栏{
背景图像：url（'../images/navbar.png'）；
颜色：白色；
字体：20px arial，无衬线；
高度：45px；
}
#导航栏a{
颜色：白色；
文字装饰：无；
}
#纳瓦尔{
列表样式：无；
保证金：0；
填充：0；
}
#李国宝{
右边框：纯色1px白色；
显示：内联块；
高度：45px；
线高：45px；
垫底：1px；
左侧填充：10px；
右边填充：10px；
垫面：1px；
}
#导航栏李：悬停{
背景图像：url（'../images/navbar selected.png'）；
背景重复：重复-x；
}  

设置

浮动：左用于
li
元素

#navbar li { float:left; }

设置<代码>浮动：左用于
li
元素

#navbar li { float:left; }

谢谢你。。救了我的命谢谢你。。救了我一命