I'm trying to create a UL/LI horizontal list with background images only, with no text link visible. The reason for this is so that when I over over a list item, the background would rollover and when I click on it the current item would toggle. basically it is a horizontal menu with background images that can be toggled; mimicking the job of a radio button.

I have done it like this;

<div id="options">
<ul id="list"> 
    <li class="active"><a href="#" class="option1 active" id="link1"><span>XXXXX</span></a></li> 
    <li><a href="#" class="option2" id="link2"><span>XXXXX</span></a></li> 
    <li><a href="#" class="option3" id="link3"><span>XXXXX</span></a></li> 
</ul> 
</div>

The CSS for option1, option2 and option3 simply define the background image.

#options LI{list-style-type: none; display : inline}
a.option1{ background:url('../images/option1.png') no-repeat;}
a.option2{ background:url('../images/option2.png') no-repeat;}
a.option3{ background:url('../images/option3.png') no-repeat;}

a.option1,  a.option2, a.option3{
 background-position:top;
 display:inline;
 width:230px;
 height:40px;
}

And the hover & active css part simply sets the background position like so-

a.option1:hover, a.option2:hover, a.option3:hover{
 background-position:bottom;
}

a.active{
 background-position:bottom !important;
}

This works fine, however on top of the background I get the words "XXXXX" as text links and I'm struggling to hide them. They are interfering with the hover action and preventing rollover (even if I replace XXXXX with a period or something short).

I can't just remove the text from the link as it would hide the whole LI element. I have tried to use

display:none; or text-indent:-999px

but then the whole UI element becomes invisible. I can't understand what I'm doing wrong.

Are you able to help?

Thanks