I figured it out!. The trick is in the css content rule with event set to hover in the max mega menu settings. This is the custom styling for anyone else that may land here.
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link::before {
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-bottom: 2px solid;
-webkit-transition: width .3s ease;
-moz-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
#{$wrap} #{$menu} > li.mega-menu-item:not(:hover) > a.mega-menu-link::before {
width: 0;
box-sizing: border-box;
}