How do I target a:hover navigation links only? The a:hover's that I want for the rest of the site are overriding the navigation site links

www.moetalks.com

password 2024

Start in css at line 62.

I am trying to change the style of the hover links on the site navigation only.  This first part works great.  Just the way I want it on the navigation part on all pages.

// dropdown background & font colors //
.header-nav-folder-item {
background: #0b5394;
/*  opacity: 100%!important; if you want to make it a little less blue*/
a { color: white!important; }
}
// dropdown hover colors //
.header-nav-folder-item:hover {
background: #fac827;
}
/* Nav item hover color */
.header-nav-item a:hover {
    font-weight: bold!important;
  text-decoration:underline!important;
  a { color: white!important; }
}
But as soon as I add the below, it overrides the navigation and uses the below for the entire site, including the navigation.

I tried the #page selector and it works but because I also have markdown blocks that have links in them I would have to create a different code for each markdown block. It works perfectly without the #page selector but it's taking over the navigation.  How do I just target hover navigation links?

// #page .sqs-block-html //

a {color: #0b5394!important;
text-decoration: none!important; 
}

// #page .sqs-block-html //

a:hover  {
     color: #0b5394!important;
  text-decoration: underline!important; 
font-weight:bold
  }