CSS Hover Help Reqd

[Maccon]

Hi - thanks for stopping by!!

Ok heres my issue. I am trying to create a rollover on the sidebox. I have the rollover working but it will only display behind the text.

Eg:

CATEGORYTITLE (12) would show the image behind the TLE where I need it to display on the right of the containing box and not to the right of the text. It is worth mentioning that the image does not sit behind the numbers display, only the category name.

.sideBoxContent , .sideBoxContent a{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
	}

.sideBoxContent a:hover{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
text-decoration: underline;
background-image: url(../images/lft_roll.jpg); background-position:right;
image-width: 149px;
background-repeat: no-repeat;	
}

any help greatly appreciated! :)

[Maccon]

no one got any advice??

[kobra]

No link to your site for us to see

[Maccon]

sorry :) http://bennzaks.co.uk

[kobra]

Try adding a z-index

http://www.w3schools.com/Css/pr_pos_z-index.asp

[Maccon]

Kobra - firstly let me say thanks, i appreciate your input!

now i tried a z-index..

.sideBoxContent a:hover{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
text-decoration: underline;
background-image: url(../images/lft_roll.jpg); background-position:absolute; z-index: 1;
image-width: 149px;
background-repeat: no-repeat;	
}

but now the image is only visible on a single item within the menu (and that item drops over 2 rows)..

any other thoughts?

cheers