This is happening because in regular HTML/CSS you're not re-rendering the DOM when you click on a link (I'm assuming) so it stays "active". Per the docs:

A link becomes active when you click on it.

Active is stateful in your HTML and only occurs when you click the link. If you refresh the page, for example, active state is toast. I believe you're looking for RouterLinkActive:

Tracks whether the linked route of an element is currently active, and allows you to specify one or more CSS classes to add to the element when the linked route is active.

Try changing gallery.component.html to:

<nav>
    <ul>
        <li tabIndex="1">
            <a routerLink="/arts" routerLinkActive="active-link">Arts</a>
        </li>
    </ul>

    <ul>
        <li tabIndex="1">
            <a routerLink="/nature" routerLinkActive="active-link">Nature</a>
        </li>
    </ul>

    <ul>
        <li tabIndex="1">
            <a routerLink="/animals" routerLinkActive="active-link">Animals</a>
        </li>
    </ul>
</nav>

... and in gallery.component.css:

ul {
    list-style: none;
}

li {
    padding: 10px;
    border: 1px solid #d1d1d1;
}

/* Applied when link is active */
.active-link {
   background-color: #8a8a8a !important;
   color: white;
}

Now, the RouterLinkActive directive will watch for router changes and apply the active-link class to the active link. This is important because if the user, for example, navigates directly to /arts you would want the active state applied, right? Same if they use their back button.