Text to tabs in nav

Im trying to make the text links in the navbar,

to be images, what part of the css to I need to modify for this to happen, so far I tried

div.nav {
height: 45px;
}
.header .nav li a{
text-decoration: none;
font-size:20px;
font-weight:300;
text-indent:-999px
}

.nav li.page-item-896 a {
background-image:url(images/nav_shop.png);
width:100px;
}

Honestly, I’d leave it as it is. Text is much more accessible that images.

Anyhow, if you must have images, you can just put the images in the HTML. BUT … that’s not good on lots of levels, as it means the fallback text won’t show if images are off, and you won’t have hover effects etc.

The best method currently is to leave the text where it is (so that it appears if images are off) and place the images over the top of the the text, as shown here:

http://www.pmob.co.uk/temp/headerreplacement3.htm

thanks