CODEWITHSUNDEEP
htmlcss
user8116739
user8116739

Reputation:

One of my menu items is not changing color when it is selected

I am coding a website for a class that I am taking and I am having a strange issue. I want the menu items in the top to be grayed out when they are the current page. This is working with all of them except for one. Here is the HTML and CSS for this section along with screenshots of what is happening.

HTML for the menu:

<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 for the menu:

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

Screenshot of what I want:

This is what is supposed to happen when the page is the current page.

Screenshot of what is happening on the one page:

This is what is happening to the one page.

As you can see, the Self Reflections page is the current page. The problem is that it is not turning gray. The link is not active, I just want it to be gray like the rest of the pages. I am still fairly new to HTML and CSS so any help is greatly appreciated. Thank you!

Upvotes: 0

Views: 30

Answers (1)

Lazar Nikolic
Lazar Nikolic

Reputation: 4394

It is because of this line

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

Remove color: White from here

Upvotes: 1

Related Questions