Seeking CSS to underline menu item associated with the one active page on drop-down menu

Site URL: https://sswebdev-one.squarespace.com/

Site URL: https://sswebdev-one.squarespace.com/

The password for our site is: secret

Here are the steps to reproduce the issue I'm trying to solve:

1) Hover over the "Services" menu item and select "Advocacy" from the drop-down menu that appears.

2) Hover over the "Services" menu item again.

Actual Result: All the the menu items on the "Services" menu are underlined.
Expected Result: I expected only the "Advocacy" menu item to be the only menu item that was underlined as that is the current page.

This is the CSS I have defined for underlining the current / active page:

.header-nav-item--active a {
  background-image: none !important;
  border-bottom: 1px solid currentColor !important;
}

This works fine for the top-level menu items but not for the menu items on the sub-menu. If you can suggest what CSS I should use to underline just the menu item of the current active page, I'd appreciate your suggestions. Thank you!

On 7/25/2021 at 6:09 PM, wonderwebber said:

Site URL: https://sswebdev-one.squarespace.com/

Site URL: https://sswebdev-one.squarespace.com/

The password for our site is: secret

Here are the steps to reproduce the issue I'm trying to solve:

1) Hover over the "Services" menu item and select "Advocacy" from the drop-down menu that appears.

2) Hover over the "Services" menu item again.

Actual Result: All the the menu items on the "Services" menu are underlined.
Expected Result: I expected only the "Advocacy" menu item to be the only menu item that was underlined as that is the current page.

This is the CSS I have defined for underlining the current / active page:

.header-nav-item--active a {
  background-image: none !important;
  border-bottom: 1px solid currentColor !important;
}

This works fine for the top-level menu items but not for the menu items on the sub-menu. If you can suggest what CSS I should use to underline just the menu item of the current active page, I'd appreciate your suggestions. Thank you!

Hi. Edit this code

.header-nav-item--active a {
    background-image: none !important;
    border-bottom: 1px solid currentColor !important;
}

to this (I added symbol > after --active)

.header-nav-item--active>a {
    background-image: none !important;
    border-bottom: 1px solid currentColor !important;
}

Hi tuanphan - 

Thanks so much for your suggestion. That was the first part of the solution I was looking for - to underline the top-level menu item ("Services") and not all the sub-menu items. With your suggestion I was able to figure out the next part of the solution which was to underline the single menu item on the sub-menu that is associated with the current / active page. The CSS I used was:

body:not(.header--menu-open) .black .header-nav-item--active .header-nav-folder-item--active>a {
  background-image: none !important;
  border-bottom: 1px solid currentColor !important;
}

I'm not sure if that's the most efficient CSS but it seems to work fine.

Here is the related CSS for the hover-over (for top and sub-menu items):

.header-nav-item>a:hover {
    border-bottom: 1px solid currentColor !important;
}

body:not(.header--menu-open) .black .header-nav-item .header-nav-folder-item>a:hover {
    border-bottom: 1px solid currentColor !important;
}

Thanks again for your help with this.