Active Menu Highlight CSS

Question

I want to highlight the current menu you have click. I\'m using CSS, but it is now working.

here is my css code:

#sub-header ul li:hover{ background-         


        

Answer 1

Let's say we have a menu like this:

  Link 1
  Link 2
  Link 3
  Link 4

Let our current url be https://demosite.com/link1.html

With the following function we can add the active class to which menu's href is in our url.

let currentURL = window.location.href;

document.querySelectorAll(".menu a").forEach(p => {
  if(currentURL.indexOf(p.getAttribute("href")) !== -1){
    p.classList.add("active");
  }
})