Having some trouble with my very first website. I managed to put together a navigation bar at the top that is close to what I want (aside from the colors). The problem is, when I click on different links, I want the box to change color but it's stuck highlighted on the homepage. It seems like a simple fix but I can't figure it out. Thanks for any assistance.
body
{
font-family:sans-serif;
width: 100%;
margin: 0px;
}
/* upper strip holding the tabs*/
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position:fixed;
top: 0px;
width: 100%;
background-color: #328CC1
}
li
{
float:left;
border-right:3px solid #30FFE3;
}
li a
{
display: block;
color: whitesmoke;
text-decoration: none;
padding: 14px 16px;
text-align: center;
}
li a:hover:not(.active)
{
background-color: #111;
}
a.active
{
background-color: #EAB126
}<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#academics">Academics</a></li>
<li><a href="#athletics">Athletics</a></li>
<li><a href="#contact">Contact</a></li>
</ul>