Menu <ul> : les liens ne fonctionnent pas

Bonjour,
J'ai un petit souci avec un menu ul dont les liens ne fonctionnent pas. Il n'y a pas de texte dans les liens, il y a seulement une image de background. est-ce que cela vient de là ?
HTML

<ul id="chap">
        <li class="chap" id="new"><a href="#"></a></li>
    <li class="chap" id="por"><a href="portrait.htm"></a></li>
    <li class="chap" id="tra"><a href="travel.htm"></a></li>
    <li class="chap" id="pri"><a href="print.htm"></a></li>
    <li class="chap" id="sti"><a href="still.htm"></a></li>
    <li class="chap" id="ful"><a href="full.htm"></a></li>
    <li class="chap" id="adv"><a href="advertising.htm"></a></li>
</ul>

CSS

ul#chap{
    position: absolute;
    left: 10px;
    top: 20px;
    width: 700px;
    height: 20px;
    display: inline-block;
}
li.chap{
    list-style-type : none;
    cursor: pointer;
    float: left;
    background: url(../img/inter/sprite-portfolio.png) no-repeat;
}
li#new{
    width: 45px;
    height: 15px;
    background-position: 0 -15px;
}
li#new:hover{
    background-position: 0 0;
}
li#por{
    width: 77px;
    height: 15px;
    background-position: -45px -15px;
}
li#por:hover{
    background-position: -45px 0;
}
li#tra{
    width: 142px;
    height: 15px;
    background-position: -122px -15px;
}
li#tra:hover{
    background-position: -122px 0;
}
li#pri{
    width: 56px;
    height: 15px;
    background-position: -264px -15px;
}
li#pri:hover{
    background-position: -264px 0;
}
li#sti{
    width: 82px;
    height: 15px;
    background-position: -320px -15px;
}
li#sti:hover{
    background-position: -320px 0;
}
li#ful{
    width: 88px;
    height: 15px;
    background-position: -402px -15px;
}
li#ful:hover{
    background-position: -402px 0;
}
li#adv{
    width: 100px;
    height: 15px;
    background-position: -490px -15px;
}
li#adv:hover{
    background-position: -490px 0;
}

Merci de votre aide