Pseudo class for navbar not working - html

Question

So I have a simple navbar which is not working for some reason. All the other links and pages work except for this one and I was wondering if someone would be able to spot an error in the following code. Notice how 'glob' is not yellow. I thought I had a more specific rule somewhere else which was overriding that rule but I don't think I have such a rule, I only have less specific.
#subnav {
height: 10%;
text-align: center;
background-color: green;
width: 100%;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a:active {
color: yellow;
}
<div id="subnav">
<ul>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Po </li>
<li> <a class="active" href="glob.html">Glob </a></li>
<li> Donors </li>
</ul>
</div>

Answer 1

.active in your case is a class, not a state which would be adressable via a pseudo-selector. So your selector for it has to be
#subnav li a.active {
color: yellow;
}
(note the . instead of the :)
#subnav {
height: 10%;
text-align: center;
background-color: green;
width: 100%;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a.active {
color: yellow;
}
<div id="subnav">
<ul>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Po </li>
<li> <a class="active" href="glob.html">Glob </a></li>
<li> Donors </li>
</ul>
</div>

Answer 2

If you want to target the active class, you must use .active, not :active
so the rule will be:
#subnav li a.active {
color: yellow;
}
The :active pseudo selector works a little different, here is a good explanation https://css-tricks.com/almanac/selectors/a/active/
But in your code you are adding the active class, and not using it on the css later.
Hope this help you.