HTML链接不起作用？尝试了各种文件路径

Question

想知道是否有人可以告诉我为什么我的链接不起作用。我试过直接使用文件路径，但仍然没有运气。

我不确定它是css还是html链接。代码片段如下。

HTML

<div id="menu">
    <ul>
        <li class="active"><a href="cooking.html" accesskey="1" title="Homepage">Homepage</a></li>
        <li><a href="cookeryclasses.html" accesskey="2" title="Classes">Classes</a></li>
        <li><a href="cookeryaboutus.html" accesskey="3" title="About">About Us</a></li>
        <li><a href="http://www.abbeywoodprojects.co.uk/contact.html" accesskey="4" title="Contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
    float: right;
    width: 600px;
    height: 99px;
}

#menu ul {
    float: right;
    margin: 0px;
    padding: 70px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
    margin-left: 3em;
}

#menu a {
    display: block;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 1.10em;
    font-weight: 600;
    color: #B6B6B6;
}

#menu .active a
{
    color: #FFFFFF;
}

#menu a:hover {
    text-decoration: underline;
}

高级谢谢你

添加了一个jsFiddle：http://jsfiddle.net/jSgPR/

Answer 1

您的链接工作正常，但:before元素出现在链接之上。

这一点CSS出现在menu的顶部，从而使链接无法点击：

#banner:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    /*background: url('images/gradient-bg.png') no-repeat right top;*/
    background-size: 100% 100%;
    top: 0px;
    right: 0px;
}

您可以通过在CSS文件中添加以下内容来解决此问题

position:relative; z-index:10;

将这些内容添加到#menu，您就可以悬停并点击导航链接。

Answer 2

你必须：

• cooking.html
• cookeryclasses.html
• cookeryaboutus.html

与你使用的php文件在同一个文件夹中，如果你只使用文件名而没有路径。

Answer 3

检查这个小提琴。一切都会奏效。 http://jsfiddle.net/jSgPR/1/

<a href="absoluteurl"></a>