0

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

我不确定它是 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/

4

3 回答 3

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，您将能够悬停并单击导航链接。

于 2013-06-27T12:54:18.500 回答
0

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

<a href="absoluteurl"></a>
于 2013-06-27T12:50:53.767 回答
0

你必须有：

  • 烹饪.html
  • 烹饪类.html
  • cookeryaboutus.html

如果您只使用文件名而不使用路径，则在与您使用的 php 文件相同的文件夹中。

于 2013-06-27T12:36:32.167 回答