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

<ul id="nav">

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

</ul>

This allows you to hover over, click and be sent over to the 'href' link the specified button has been linked to.

Answer 2

Anchor tags (<a>) are inline elements. Since they don't have any content they won't get rendered and you have only the background.

Fill them with information (e.g. the actual name of the link instead of a sprite) or use a non-breaking space entity   and display: block on your anchor tags. You can also combine both techniques.

Edit: Since you asked about a concrete example:

#nav a { display:block; }

<ul id="nav">
    <li class="nav-button" id="home">
        <a href="Index.html">&nbsp;</a>
    </li>
    <li class="nav-button" id="whatIs1031">
        <a href="whatIs1031.html">&nbsp;</a>
    </li>
    <!-- ... -->
</ul>

However, I believe this is still not the best solution. I would come up with something lie this:

#nav a {
    display: block; 
    padding-left: 15px; /* adjust this value to your image */
    background: url(sprite_a.png) no-repeat;  /* off-image */
}
#nav a:hover{
    background: url(sprite_b.png) no-repeat;  /* on-image */
}

<ul>
  <li><a href="Index.html">Home</a></li>
  <li><a href="whatis1031.html">What is a 1031 exchange?</a></li>
  <li><a href="exchangeRequ.html">1031 Exchange Requirements</a></li>
  <!-- ... -->
</ul>

Answer 3

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.

Answer 4

First of all your links have no css styling and no content and thus have no size, only your list elements have size. For the links to have the styling applied to them it should look like this:

<li class="nav-button"><a id="fee" href="fees.html"></a></li>

To the question of nothing showing the image, that works absolutely fine for me. Except for the last item which is referenced wrong in the css:

#h-contactUs

should be:

#contactUs;