Currently, I have set up the following HTML and CSS:
<div id = "navi">
<ul>
<li><a id = "topLinks" class = "currentPage" href = "index.html"> Home </a></li>
<li><a id = "topLinks" href = "blockOne.html"> Read </a></li>
<li> Write </li>
<li> Vote </li>
<li> Donate </li>
</ul>
</div>
CSS:
#topLinks:hover, #topLinks:active{
color: black;
}
.currentPage{
color:#ce5438;
font-size: 40px;
}
An issue arises when navigating between pages. For example, if I am on the Home page, the color of the link is black as intended. However, when I go to another page like Read, the link for Home becomes a blue-ish color instead of reverting back to white. I attempted to use a:visited to change it to white, but then all visited links turn white regardless of the current page (losing the black font color for the active page).
Any assistance would be greatly appreciated!