How To Make Navigation With Images That Is Clickable?

I need to make navigation for website. It uses images not text. Text is hidden. Of course, navigation is created for navigating in page. I created navigation, but I just can't click on it. I think that it's because text is "pushed to left" (hidden in other words), but no text - no links - no clicks. Any idea how to fix it?

HTML:

<div id="navigation">
    <ol>
        <li class="home"><a href="home">Home</a></li>
        <li class="services"><a href="services">Services</a></li>
        <li class="gallery"><a href="gallery">Gallery</a></li>
        <li class="ourClients"><a href="our-clients">Our Clients</a></li>
        <li class="aboutUs"><a href="about-us">About Us</a></li>
        <li class="contactUs"><a href="contact-us">Contact Us</a></li>
    </ol>
</div>

CSS:

#navigation {
    background: url( "images/navigation.png" );
    height: 80px;
}

#navigation li {
    float: left;
    height: 30px;
    margin: 0 60px 0 0;
    text-indent: -9999px;
}

#navigation li.home {
    background: url( "images/navigation_home.png" );
    width: 54p开发者_开发技巧x;
}

#navigation li.services {
    background: url( "images/navigation_services.png" );
    width: 61px;
}

/* And so on like 'li.x'. */

Images that convey information are content, not presentation or background. Use an <img> element.

<li class="home"><a href="home"><img src="images/navigation_home.png" alt="Home"></a></li>

you need to make the link a fill the li even if the text is indented, so there's something other than the (hidden) text to click on ;)

#navigation li a {    
  display: block;
  height: 30px;
}