链接不显示链接 [英] Links not displaying links

问题描述

我已经创建了一个导航菜单，并且想知道为什么当我悬停在包含链接不显示的链接的li项目上？

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?

这是我的Html包含链接

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>

这里是我的css，它包含一个sprite的引用，显示每个列表项。

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

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

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

推荐答案

在< a>< / a>

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

<a>name of link</a>

或者如果您喜欢没有文本的字段，请使用< li> 内部标记< 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>

查看此示例jsfiddle

问候。

这篇关于链接不显示链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！