I have an unordered list and the background image is being cut off when trying to place it next to the text.

I'm using jquery to add the class to the anchor tag to display the image, and its working fine, the only problem is the image gets cut off. I've been playing around with the css, but can't seem to figure out how to make the image display properly...it seems like the < li > is hiding the image behind it somehow...can I place the image in front of the < li > to make it display...or am I missing something else?

Can someone help me? Thanks.

Here's the HTML:

<ul id="nav>
    <li>
       <a class="folder_closed">Item 1</a>
    </li>
</ul>

Here's the CSS:

ul#nav{
    margin-left:0;
    margin-right:0;
    padding-left:0px;
    text-indent:15px;
}

#nav > li{
    vertical-align: top;
    text-align:left;
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
}

.folder_open{
    position:relative;
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
}
.folder_closed{
    position:relative;
    background-image: url(../images/minimize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px; 
}