I have a nav bar in which I'm trying to get the <li> elements to behave in a way that they change colors when it has focus. I can't seem to make that work. It' won't keep the focused color. Here is my CSS below:

Code:
a:focus {
    color: #d63a3a;
}

.categories li {
    font-size: 22px;
    font-weight: 600;
    margin: 3px 25px;
    text-align: center;
    display: inline-block;
    text-shadow: 1px 1px #026cab;
    color: #fff;
}

.categories li:link,
.categories li:visited {
    color: #d63a3a;
    padding-bottom: 3px;
    border-bottom: 3px solid transparent;
}

.categories li:active,
.categories li:hover {
    color: #d63a3a;
    transition: border-bottom 0.3s;
}