JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="top">
     <li><a href="">S#omething else</a></li> 
    <li>
        <a href="#">Banana (parent)</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">L#ink 2 (current)</a></li> 
        </ul>
    </li>    
     <li>
         <a href="#">Not current</a>
        <ul>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li> 
        </ul>
    </li> 
</ul>

CSS

li {
    padding:0 10px; }
li ul { padding:0 30px; }

#top > .current > a { background:red; }

JavaScript

var url = window.location.href; // (or however you prefer)

url = "#"; // For the sake of presentation

    $('a[href*="'+url+'"]').parents('li').addClass('current');