Help with Navigation Bar Underline Animation

Hey all,

https://www.yuryourultimaterelationship.com/

I have inserted this code into my site's CSS to create a yellow "underline" effect when someone hovers on a navigation bar item.

.header-nav-item:not(.user-accounts-link) a:after {
	content: '';
	display: block;
	border-bottom: 1.5px solid #FFCA00;
  	transform: scaleX(0);  
  	transition: transform 500ms ease-in-out;
	transform-origin:  0% 50%;
}
.header-nav-item:not(.user-accounts-link) a:hover:after {
    transform: scaleX(1);
}

I would like to fix 2 issues:

1. If a page is selected that is listed in a dropdown menu, the purple underline for the dropdown folder name still shows on hover. I would like it to only have the yellow color when someone hovers.

2. On hover, the yellow underline spans the width of the entire container. I would like it to only underline the page name (same like the purple underline when page is selected).

Thanks, all! ❤️

Amazing, thank you!

This completely removes the purple underline when the page is selected, but actually it looks better this way.