Color change on hover does not work when the background image is changed

If the menu.gif here is replaced by a different image then the hover option does not work. Can anybody help me identify the problem

#menus li {
display:inline;
list-style:none;
}
#menus li a {
background:transparent url(img/**menu.gif**) no-repeat;
display:block;
color:#382E1F;
height:31px;
line-height:31px;
padding:0 20px;
margin-left:-10px;
text-decoration:none;
font-size:12px;
font-weight: bolder;
float:left;
z-index:1;
}

#menus li a:hover{
display:bloc开发者_如何学JAVAk;
color: #382E1F;
font-size:15px;
background-color: green;
font-weight: bold;
} 

#menus li a.current {
background-position:0 -31px;
}
#menus li.current_page_item a, 
#menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
width:45px;
padding:0;
margin-left:0;
text-indent:-999em;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
cursor:default;
}

Can you show the CSS for when you have changed the background-image?

Alternatively, if it is this CSS you are having issues with, background-color layers behind background-image

Therefore on hover, you need to specify no background-image:

#menus li a:hover{
display:block;
color: #382E1F;
font-size:15px;
background-image:none;
background-color: green;
font-weight: bold;
}