Расширить фоновое изображение на <li>

Question

У меня есть какой-то неупорядоченный список, и я создал его таким образом, чтобы он отображал фоновое изображение в li, если курсор наведен на него:

<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 работает нормально)