Navigation image-link not working

This should be simple but I can't figure out why this image-link doesn't work? When I hover over the image it's as though there isn't a link to click on but it's there...see code below.

.researchnav {
display: block;
background: url(../images/research.png);
background-repeat: no-repeat;
width: 457px;
height: 38px;
margin-left: 370px;
text-indent: -9999px;   

}

.researchnav:hover {
display: block;
background: url(../images/research_over.png);
background-repeat: no-repeat;
width: 457px;
height: 38px;
margin-left: 370px; 

}

<ul id="nav">
    <li class="researchnav"><a开发者_开发百科 href="research.html">Research</a></li>
</ul>

Try applying the styles to the a instead of the li.

<a class="researchnav" href="research.html">Research</a>