时间戳

首页 > 解决方案 > 我的菜单项之一在被选中时没有改变颜色

html - 我的菜单项之一在被选中时没有改变颜色

问题描述

我正在为我正在上课的课程编写一个网站，但我遇到了一个奇怪的问题。我希望顶部的菜单项在当前页面时显示为灰色。这适用于除一个之外的所有人。这是本节的 HTML 和 CSS 以及正在发生的事情的屏幕截图。

菜单的 HTML：

<nav>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="About Me.html">About Me</a></li>
        <li><a href="Hobbies.html">Hobbies</a></li>
        <li><a href="Extras.html">Extra Curriculars</a></li>
        <li><a href="Projects.html">Projects</a></li>
        <li class="selected">Self Reflections</li>
    </ul>
</nav>

菜单的 CSS：

nav ul {
    list-style-type: none;
    background-color: DarkRed;
    border: 4px solid Black;
    border-radius: 10px;
    font-family: sans-serif;
    font-weight: bold;
    padding: 16px;
}
nav ul li {
    display: inline;
    border-right: 2px solid Black;
    padding-right: 8px;
    padding-left: 8px;
}
nav ul li:last-child {
    border-right: none;
    color: White;
}
nav ul li a {
    color: White;
}

nav ul li a {
    text-decoration: none;
}

nav li.selected {
    color: Gray;
}
nav li a:hover {
    text-decoration: underline;
}

我想要的截图：

这是当页面是当前页面时应该发生的事情。

一页上发生的事情的屏幕截图：

这就是一页发生的事情。

如您所见，Self Reflections 页面是当前页面。问题是它没有变灰。链接不活跃，我只想让它像其他页面一样是灰色的。我对 HTML 和 CSS 还是很陌生，因此非常感谢任何帮助。谢谢！

标签： htmlcss

解决方案

正是因为这条线

nav ul li:last-child {
    border-right: none;
    color: White;
}

color: White从这里删除

推荐阅读