在<li> </li>上扩展背景图像

Question

我有一些无序列表，如果光标悬停在它上面就会显示一个背景图像：

<div class="sidebar">
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>   
</div>

和CSS：

/* I DON'T HAVE STYLE FOR <UL> */
.sidebar li {
    list-style-type: none;
}
.sidebar li:hover {
    list-style-type: none;
    background-repeat: repeat-x;
    background-image: url(../img/mbg.png);
    color:white;
}

但看起来像是：

如何让背景到达左边？谢谢！

Answer 1

可能你必须这样写：

.sidebar li{
margin:0;
pading-left:10px;
}

然后它的工作 检查此http://jsfiddle.net/2thVU/

Answer 2

问题不在于.sidebar li:hover
检查jsfiddle demo （相同的css工作正常）