html - 链接在此页面的导航栏中不起作用，但在其他页面上可以正常工作

Question

我的导航栏中的链接无效。文字出现了，但我无法点击它。它适用于所有其他页面，但不适用于此页面。

我尝试过修改 css，但没有成功，因为它仍然不允许我点击链接。

这是我的 html。

<nav>
    <ul>
        <li><a href="about.html" style="color: white; text-decoration: none;">About</a></li>
        <li>Portfolio</li>
        <li><a href="resume.html" style="color: white; text-decoration: none;">Resume</a></li>
        <li><a href="contact.html" style="color: white; text-decoration: none;">Contact</a></li>
        <li>Links</li>
    </ul>
</nav>

这是我的CSS:

body{
    background-image: url(images/city.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.container {
    position: relative;
    width: 70%;
    height: 100%;
    padding-bottom: 56.25%;
    margin-left: auto;
    margin-right: auto;
}
.box {
    position: fixed;
    left: 0;
    width: 70%;
    height: 100%;
    right: 0;
    margin: 3.8% auto;
    bottom: 0;
    top: 0;
    opacity: 0.9;
}
nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 0.9;
    color: white;
}
ul {
    list-style-type: none;
    overflow: hidden;
}

li {
    float: right;
    margin-left: 15px;
    margin-right: 5px;
    position: relative;
    right: 5px;
}
div.head{
    text-align: center;
    position: absolute;
    left: 20px;
}
a:visited{
    color: white;
    text-decoration: none;
}

Answer 1

我假设您的意思是，在您的导航栏中的 5 个链接中，“链接”和“投资组合”文本对您来说是不可点击的，因为根据我自己的测试，其他三个都没有问题。

在这种情况下，这可能非常明显，但这两个列表项没有 anchor 链接..

    <nav>
        <ul>
            <li><a href="about.html" style="color: white; text-decoration: none;">About</a></li>
            <li><a href="portfolio.html" style="color: white; text-decoration: none;">Portfolio</a></li>
            <li><a href="resume.html" style="color: white; text-decoration: none;">Resume</a></li>
            <li><a href="contact.html" style="color: white; text-decoration: none;">Contact</a></li>
            <li><a href="links.html" style="color: white; text-decoration: none;">Links</a></li>
        </ul>
    </nav>