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