It appears you're trying to use the "sprites" technique for hover effects. You need to put the :hover rule after the base rule so it is effective when you are hovering. You don't want to use the height for controlling the sprite position, but the background-position property. For example:
Code:
/*example for individual category as bg image*/
#categories li a.catBg25 {
background-image: url(../buttons/english/catbg25.gif);
height: 30px;/*image is 60px high (main above hover) or 90px high (main above hover above selected)*/
}
/*example of "sprite" for bg image switch on selected*/
#categories li a.cat-parent.catBg25, #categories li a.cat-selected.catBg25 {
background-image: url(../buttons/english/catbg25.gif);
background-position: 0 -60px;/*move up 60px*/
}
/*example of "sprite" for bg image switch on hover*/
#categories li a.catBg25:hover {
background-image: url(../buttons/english/catbg25.gif);
background-position: 0 -30px;/*move up 30px*/
}
Bookmarks