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

Maybe it is very very bad way and just for lazy person but I decided to say it.

I used PHP and bootstrap and fontawsome too

for simple I have 2 pages: 1.index and 2.create-user

put this code above your code

and in menu you add in class for menu1 and for menu2 you add

                        

                            ">dashbord
                        
                        

                            " data-target="#tickets">
                                manage users
                                
                            

                            

                                

                                    add user
                                

                                

                                    delete user
                                

                            
                        

                    

and add in css

.customlihamid {
    transition: all .4s;
}

.customlihamid:hover {
    background-color: #8a8a8a;
    border-radius: 5px;
    color: #00cc99;
}
.nav-item > .nav-link.active  {
    background-color: #00cc99;
    border-radius: 7px;
    box-shadow: 5px 7px 10px #111;
    transition: all .3s;
}
.nav-item > .nav-link.active:hover  {
    background-color: #8eccc1;
    border-radius: 7px;
    box-shadow: 5px 7px 20px #111;
    transform: translateY(-1px);
}

and in js add

$(document).ready(function () {
   $('.navbar-nav .nav-link').click(function(){
      $('.navbar-nav .nav-link').removeClass('active');
      $(this).addClass('active');
   })
});

first check your work without js code to understand js code for what