Trying to replicate "Spotlight" navigation style in 7.1

I am looking to upgrade my 7.0 site to a 7.1 site and temporarily copied the site to a free site in order to play with the changes.  I'm trying to recreate the Spotlight style navigation and for the most part I have it done except for 2 features. I put screenshots below. B

This is the 7.0 navigation bar:

This is the 7.0 navigation bar when I hover over "ABOUT".  If you notice everything goes Opaque, including the menu items under "ABOUT." These menu items only turn solid when I hover over them. The "LIVE" menu item does not go opaque and stays solid always.  (This is basically what I am trying to achieve):

This is what I am getting on my test  7.1 navigation bar when I hover over "ABOUT".  Everything goes Opaque but the menu items under "ABOUT" stay solid and "LIVE" goes opaque:

1. How do I make the menu items underneath ABOUT also go opaque. I only want them to turn solid when I am hovering over them?

2. How do I make it so that "LIVE" is not affected by the opacity property. I basically want LIVE to always stay solid.

This is what I have so far in my Custom CSS:

// Spotlight Navigation Style//
.header-nav-list:hover > .header-nav-item {
  opacity: 0.3;
}
.header-nav-list:hover > .header-nav-item:hover {
  opacity: 1.0;
}

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.3;
}
.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}

//Pulled from 7.0 CSS. It made the LIVE blue but I don't see anything that will make it not opaque//

a[href^="/live"]{
       color: #7cb7c1 !important;
       font-weight: bold
}
 

Have you solved it or still need help?

Solved it. Chat GPT is your friend lol!