Undeline Menu - Submenu

Oh, that's the code:

/* Underline Menu*/
.main-navigation .main-nav ul li[class*="current-menu-"]>a:after,
.main-navigation .main-nav ul li:hover>a:after,
.main-navigation .main-nav ul li.sfHover:hover>a:after {
content: "";
display: block;
width: 100%;
border-bottom: 2px solid #e62a32;
position: relative;
top: -15px;
opacity: 1;
}

.main-navigation .main-nav ul li[class*="current-menu-"]>a:after {
border-bottom: 2px solid #184590;
}

/* Force menu item to width of text */
.fl-builder-content nav ul li a {
display: inline-block;
}
/* Create hidden underline on all menu items but hide it */
.fl-builder-content nav ul li a:after {
content: "";
display: block;
width: 100%;
border-bottom: 2px solid #e62a32;
top: 10px;
position: relative;
opacity: 0;
}
/* Change colors and show underline on hover and current */
.fl-builder-content nav ul li:hover>a:after {
border-bottom: 2px solid #e62a32;
top: 10px;
opacity: 1;
}
.fl-builder-content nav ul li[class*="current-menu-"]>a:after {
border-bottom: 2px solid #e62a32;
top: 10px;
opacity: 1;
}

Sorry, I did not mentioned in the previous post.

Hi there,

add this CSS to move the Submenu underline to below the text:

.main-navigation .main-nav ul ul li:hover>a:after {
    top: 0;
}

Thank you David!

You're welcome

Dear @David, I'm sorry to get back on that.

When we move with the mouse over the sub-menu, the underline moves on the text and it seems a "strike" text.

https://www.bfbinsurancebroker.com/agite/

The main menu voice is Associazioni.

Could you help us again?

Thanks in advance.

Hmmm.. theres a few CSS conflicts going on there.

Could you remove the CSS you have added for the navigation underline effect and we'll look at a better way of doing that.

Thank you @David.

Moved away the css code added.

Colors on menu selection: #184590
Colors on menu active: #e62a32
(if helps)

Thanks in advance indeed.

Can you remove this as well - its in the Customizer Additional CSS:

.main-navigation li a:after {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    content: "";
}

Done @David.

Sorry, I was convinced to have removed all.

No problems :) Try this CSS:

@media (min-width: 769px) {
    .main-navigation .menu .menu-item>a::after {
        content: "";
        position: absolute;
        right: 20px;
        left: 20px;
        bottom: 0;
        display: block;
        height: 2px;
        background-color: transparent;
        transition: 0.3s background-color ease;
    }

    .main-navigation .menu .menu-item.current-menu-item>a::after,
    .main-navigation .menu .menu-item.current-menu-ancestor>a::after,
    .main-navigation .menu .menu-item>a:hover::after {
        background-color: currentColor;
    }

    .main-navigation ul ul {
        padding-bottom: 20px;
    }
}

Wow... I'll study your css to understand how you did that.
Works perfectly.

Thank you again.

Glad to be of help :)