Add fx border to fullwidth sub menu

Hello
I have the .avia-menu-fx working nicely on my main menu, but I’d like to apply the same hover/active etc with the fx element on a fw sub menu. Here’s what I’d like to replicate in a sub menu as well. I’ve given my sub menu a class of ‘subNavWhite’ and then will also build one called ‘subNavBlack’. Thanks.

/* horizontal line under current item */

.header_color .avia-menu-fx {
	/* display: none; */
    opacity: 1!important;
    background: #5400ff!important;
    height: 5px!important;
}

.av-main-nav li:hover .avia-menu-fx,
.current-menu-item > a > .avia-menu-fx,
.av-main-nav li:hover .current_page_item > a > .avia-menu-fx {
    /* opacity: 1!important;
    visibility: visible; */
}

/* fx animation */

.avia_transform .av-main-nav li:hover .avia-menu-fx {

    -webkit-animation: avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
    animation:         avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
}