JQuery add class to url when on page in current navigation menu

Question

I'm currently using the SharePoint Web Control spnavigationmanager to create a navigation for sites that are easily configurable by going to Site Settings > Navigation and making changes there.

I'm trying to class the link in the second dropdown section for the current page I am on. See image.

As you can see I am on the overview page in SharePoint. Full URL is http://server-info/ourcompany/brandadverts/brandresctr/Pages/Overview.aspx.

SharePoint URL added to navigation page is /ourcompany/brandadverts/brandresctr/Pages/Overview.aspx

I would like the Overview Link in the fly-out navigation to be the same style as the About Our Brand Link.

Like the below.

Code output in developer looks like the below.

Answer 1

Try below style

.ms-quicklaunch-navmgr > ul.root > li > ul.dynamic > li.dynamic > a:hover {  
  background-color: red;
}

Answer 2

If you're just looking to use some jQuery to find the anchor tag in your nav menu whose href is the same as the current url you could do something like this:

var currentRelUrl = window.location.pathname;    
var navNode = $(".s4-ql .menu-vertical a[href$='" + currentRelUrl + "']").addClass("highlight");