Links not displaying links

Question

I have created a navigation menu and was wondering why is it when I hovered over the li item containing the link the link does not display?

Here is my Html containing the links

<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>

Here is my css which contains a refrences to a sprite which shows each list item.

#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 ;
}

Edit: Here is a demo page on code pen http://codepen.io/Austin-Davis/pen/Fdhej

Answer 1

In the tag <a></a> try put the name of link... xD

<a>name of link</a>

Or if you like the field without text use the tag <li> inside tag <a>

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

See this Example jsfiddle

Greetings.