Question

I have some unordered list, and made it so it shows up a background image on the li if the cursor is hovering it:

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

And 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;
}

But it looks like:

How can I make the background reach to the end on the left? Thanks!

Answer 1

May be you have to write like this:

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

then it’s work
check this http://jsfiddle.net/2thVU/