Underline of different color on hover for menu items

Hello,

I need to add an underline as hover on the menu items on navigation bar. I want to make each different per section and to remain when it's active.

I'm using something this code but it's not working correctly

.header-nav-item a:hover {
   text-decoration: underline;
  text-decoration-color: #2C6BDB; 
text-underline-offset: 8px;
  text-decoration-thickness: 8px;
}

.header-nav-item a:active {
   text-decoration: underline;
  text-decoration-color: #2C6BDB; 
  text-underline-offset: 8px;
  text-decoration-thickness: 8px;
}

6 minutes ago, Ansazu10 said:

Hello,

 

I need to add an underline as hover on the menu items on navigation bar. I want to make each different per section and to remain when it's active.

 

I'm using something this code but it's not working correctly

.header-nav-item a:hover {
   text-decoration: underline;
  text-decoration-color: #2C6BDB; 
text-underline-offset: 8px;
  text-decoration-thickness: 8px;
}

.header-nav-item a:active {
   text-decoration: underline;
  text-decoration-color: #2C6BDB; 
  text-underline-offset: 8px;
  text-decoration-thickness: 8px;
}

 

Can you share your website URL?

Yes:

https://grouper-deer-35ne.squarespace.com/home

password is 1234

MD Rofik Thank you so much! This works perfectly 🙂 I really appreciate your help!!!