[Resolved] Drop Down Menu Transition

[Paul]

I would like to have exact same menu drop-down animation and arrow on right on hover for my website in desktop mode.

like this website

any help will be appreciated.

[Ying]

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;
}

[Paul]

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?

[Ying]

What arrow? I’m not seeing one.

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

[Paul]

Like this

This arrow will appear on hover of the particular item.

[Ying]

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

[Paul]

not yet, can you please guide me on that?

[David]

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;
}

[Paul]

That was easy, thank you.

[David]

Glad to be of help!

[Author]

Posts