How to highlight active menu link in Bitrix?

Question

css

Site on Bitrix topliga.ru.
There are menu items for "Men", "Women", "Children".

<div class="dop-menu">               
        <ul>
                <li><a href="/women">ЖЕНЩИНАМ</a></li>
                <li><a href="/men">МУЖЧИНАМ</a></li>
                <li><a href="/kids">ДЕТЯМ</a></li>
        </ul>
        </div>

It is necessary to highlight the active link (underline) that is currently clicked.
If I'm not mistaken, then this code should do it. But doesn't work. Do not tell me what could be the matter?

.dop-menu ul li a:active {
    
    text-decoration: underline;
}

Answer 1

The menu component has a SELECTED key in the array for the record that matches the current page.
Here is an example
Just make sure there are no problems with the cache.

Answer 2

If I'm not mistaken, then this code should do it

you are wrong. css has no idea what page address the user currently has. The :active pseudo-class is needed to style an element when it is clicked.
You need to either, when generating on the server, add some class to the active item, for example .active and already style it in css. Or do the same in js (parse url and set class)