Clipped images in list items

Question

I've got list items where a rollover image exceeds the bounds of the list item. Is this possible without the image being clipped?

List item rollover graphic:

Result:

Current css:

ul.nav a, ul.nav a:visited { 
    padding: 5px 5px 5px 15px;
    display: block;
    clip:none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    color: #FFF;
    background:url(../images/menu_graphic_bubble.png) no-repeat scroll;
}

Answer 1

First thing I'd try - set your z-indexes:

ul.nav a, ul.nav a:visited { blah blah; z-index:0 }

ul.nav a:hover, ul.nav a:active, ul.nav a: focus { blah blah; z-index:1 }

If that doesn't work I'd also try "background:none" somewhere, and/or "overflow:visible"