Adding hover effect to the header menu squarespace 7.1 site

HI,

I am trying to add a hover effect to the header menu in my squarespace 7.1 site.  However nothing is happening when I apply it. I think the code is possibly for 7.0 but I don't know how to change it. Could anyone help?

/*BACKGROUND COLOR*/
.Header-nav-item {
  padding: 8px !important;
  border-radius: 0px;
  transition: background .5s, color .5s;
}
.Header-nav-item:hover {
  background: 00263e;
  color: white !important;
}

Thanks

Rachel

Thank you so much!  I really appreciate it as new to coding and still trying to figure it all out.

Thanks the world for kind people helping others. Looking to add some flare to a site navbar and this looks to do that. Thanks to all and the magical google search. 🙏