Drop Down Menu Transition

Hi Paul,

Can you try this CSS in your media query?

.main-navigation ul ul {
    float: none;
    height: auto;
    width: 0;
    left: -50px;
}

.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
    width: 240px;
    transition: all 0.5s ease;
}

thanks, that's working fine, now how can I add a right arrow on each drop-down item on hover same as the above website?

What arrow? I'm not seeing one.

Can you take a screenshot of what you are referring to?

Like this

This arrow will appear on hover of the particular item.

Oh I see, do you also have the font awesome plugin installed?

not yet, can you please guide me on that?

Hi there,

try adding this CSS:

.main-navigation .main-nav ul ul li a:after {
    content: '→';
    display: inline-block;
    margin-left: 10px;
    opacity: 0;
    transform: translateX(-100%); 

}
.main-navigation .main-nav ul ul li:hover a:after {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.2s ease;
}

That was easy, thank you.

Glad to be of help!