JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs-dropdown">
    <li><a href="/home">Home</a></li>

    <li>
        <a href="javascript:">French Alps</a>
        <div>
            <ul>
                <li><a href="/region/french-alps/about">About</a></li>
                <li><a href="/region/french-alps/properties">Properties</a></li>
            </ul>
        </div>
    </li>

    <li class="focused">
        <a href="javascript:">Swiss Alps</a>
        <div>
            <ul>
                <li><a href="/region/swiss-alps/about">About</a></li>
                <li><a href="/region/swiss-alps/properties">Properties</a></li>
            </ul>
        </div>
    </li>

    <li><a href="/finance">Finance</a></li>
    <li><a href="/contact">Contact Us</a></li>
</ul>

CSS

.focused > a {color: #0F0}

JavaScript

angular.element(document).ready(function () {
    
    var ulElem = angular.element(document.querySelector('ul'));
    angular.forEach(ulElem.children(), function (node) {
        var elem = angular.element(node);

        node.addEventListener('focus', function () {
            elem.addClass('focused');
        }, true);
        
        node.addEventListener('blur', function () {
            elem.removeClass('focused');
        }, true);
    });

});