html - 链接不显示链接

Question

我创建了一个导航菜单，想知道为什么当我将鼠标悬停在包含链接的 li 项上时链接不显示？

这是我的包含链接的 Html

<ul id="nav">
            <li class="nav-button" id="home"><a href="Index.html"></a></li>
            <li class="nav-button" id="whatIs1031"><a href="whatIs1031.html"></a></li>
            <li class="nav-button" id="exchange1031"><a href="exchangeRequ.html"></a></li>
            <li class="nav-button" id="typesOfExchange"><a href="typesOfExchange.html"></a></li>
            <li class="nav-button" id="whyCLX"><a href="howToStart.html"></a></li>
            <li class="nav-button" id="howToStart"><a href="whyCLX.html"></a></li>
            <li class="nav-button" id="resources"><a href="resources.html"></a></li>
            <li class="nav-button" id="faq"><a href="fAQs.html"></a></li>
            <li class="nav-button" id="fee"><a href="fees.html"></a></li>
            <li class="nav-button" id="contactUs"><a href="contactUs.html"></a></li>
        </ul>

这是我的 css，其中包含对显示每个列表项的 sprite 的引用。

#home, #home, #whatIs1031, #exchange1031, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width: 225px;
    height: 30px;
}

#home:hover{
    background-position: -222px 0;
}

#home{
    background-position: 0 0;
}

#whatIs1031{
    background-position: 0 -36px;
}

#whatIs1031:hover{
    background-position: -223px -36px;
}

#exchange1031{
    background-position: 0 -72px;
}

#exchange1031:hover{
    background-position: -224px -73px;
}

#typesOfExchange{
    background-position: 0 -111px;
}

#typesOfExchange:hover{
    background-position: -226px -112px;
}

#whyCLX:hover{
    background-position: -227px -150px;
}

#whyCLX{
    background-position: 0 -150px;
}

#howToStart{
    background-position: 0 -190px;
}

#howToStart:hover{
    background-position: -230px -189px;
}

#resources:hover{
    background-position: -230px -226px;
}

#resources{
    background-position: 0 -227px ;
}

#faq{
    background-position: 0 -264px ;
}

#faq:hover{
    background-position: -230px -263px ;
}

#fee{
    background-position: 0 -302px ;
}

#fee:hover{
    background-position: -231px -300px ;
}

#contactUs{
    background-position: 0 -341px ;
}

编辑:这是代码笔的演示页面 http://codepen.io/Austin-Davis/pen/Fdhej

Answer 1

在标签 <a></a> 中尝试输入链接的名称... xD

<a>name of link</a>

或者，如果您喜欢没有文本的字段，请使用标签 <li>内部标签 <a>

<a href="www.google.com"><li class="nav-button"></li></a>

查看此 Example jsfiddle

问候。