Problem with hover state that doesn't stay when outside of div

Design help Animations & Interactions
1

Hello everyone !

I’m new to webflow and not so good with coding ^^ I need to integrate a multilayer menu with multiple hover states. Each “Formats & Tarifs” and “Secteurs” needs to open a submenu on hover, that is working fine. But after that, on the "Formats & Tarifs submenu, I have another interaction where another submenu opens depending on the links you hover, the interaction works fine but the problem is that as soon as the mouse leave the div "Formats & Tarifs, the first submenu disappears so we can’t navigate into the second one. It’s hard to explain, you’ll see what I’m talking about directly on the website ^^.

Thank your for your help :pray:

Here is my public shared link: Webflow - Refonte_Ma-video-corporate

And the website : https://ma-video-corporate-1.webflow.io/

2

hi @Alicia_MONTAGNE here are two videos to give you an idea how to build a Mega Menu.

3

Hello Stan, thank you for your reply, I’ve already tried those but the problem with those mega menu exemples is that you don’t have another submenu inside where the content change depending on which link you click.

But I found the solution anyway ! I had to put the container of my submenu inside the navlink, that’s why it disappeared when I hovered out cause there weren’t connected together.

Now I just have one thing I can’t figure out and it’s a problem through the entire website…the gradients. I need to change the color of my links inside the submenu. They have a gradient background color clipped to the text and I need them to go too white when I hover the grids. I’ve tried to use interactions but the problem is that when you set the initial state, you can’t put gradients, it’s only simple color. Is there a solution except adding extra CSS code ?

1 Like
4

I was checking you project and I saw some strange things, that is why I have instead of explaining concept what and why, posted these 2 videos as your original approach was not constructed the way that will work.

Glad to see you have found solution ;)

5

the animation do not have impact on your child element @Alicia_MONTAGNE as it doesn’t offer property background-image that represent your background gradient. You need custom code something like this to start with.

.bg-grid_menu:hover .big-link
    {
     color:var(--blanc);
     background-image: none !important;
}

Anyway a putting gradient on such small text make it unreadable and is not best for UX. if you make these small titles only by color of your choice, the animation will work. Just thing about that.

6

Thank you for your help !

I know I said it to the client but he wants it that way ^^

1 Like