Navigation bar: Keep parent folder hover active when hovering children items (Dropdown Menu)

Hi team!

I am trying to customise my header on Squarespace 7.1: I have 2 folders item (parent) and a few children item for each in a Dropdown Menu (folder content). I have used a code to create an animated underline effect when I hover only the parent folder (not the folder content), but I would like that effect to stay active only on the parent folder when I hover the folder content.

When I hover the folder content, I'd like the folder parent animation to stay on hover too. Does that make sense?

Here is the custom CSS that I used for that section

/*Nav Item Animated Line when hover*/
nav a:hover {
    background-size: 100% 2px !important;
}
nav a {
  padding-bottom: 6px;
  overflow: visible !important;
background-repeat: no-repeat !important;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
    background-size: 0% 2px !important;
    background-position: 0% 100% !important;
    white-space: initial;
transition: all ease-in-out 500ms !important;
-ms-transition: all ease-in-out 500ms !important;
-moz-transition: all ease-in-out 500ms !important;
-webkit-transition: all ease-in-out 500ms !important;
}
/*Transparent dropdown background */
.header-nav-folder-content {
   background: transparent !important;
  a {
   background: none !important;
}
}
/*Nav Folder Dropdown Fade In*/
.header-nav-folder-content {
  transition: all 0.5s ease-in-out !important;
}
.header-nav-folder-content:hover {
  transition: all 0.5s ease-in-out !important;
}