Horizontal dropdown menu


I am trying to create a horizontal dropdown menu which appears while hovering. I tried two ways with different tutorials but both have problems.

Solution 1:
I tried doing it this way, by customizing the existing navbar element:

It went quite fine, but the problem is that I want the sub-menu to be centered to its parent-navlink above, and I can’t figure out a way to do that. If you don’t understand that sentence you can directly look at my read-only link, there’s a first navbar(solution1) which is the one I just spoke about, and just under another navbar(solution2) which “looks” the way I want, but doesn’t work the way I want.

Solution 2:
I did this one with the help of this official webflow tutorial:

It looks nice in theory, but the problem is that it’s “flickering” and when you hover from one menu to the other, nothing is happening. I also figured out it’s not such an easy solution for mobile adaptation and such…
Note: I applied the interaction to the dropdown wrapper instead of the dropdown trigger, in order for the submenu to stay there even when I move from the trigger… it helps but it’s still not enough to get something close to satisfying.

Could you please help me with a solution in order to have the submenus centered to their respective menu items in solution 1?
Or finding a solution to optimize solution 2 and having a more fluid hovering experience could also be an option.

Thanks for your help :slight_smile:


Here is my site Read-Only: ** https://preview.webflow.com/preview/breche-ebauches?utm_medium=preview_link&utm_source=designer&utm_content=breche-ebauches&preview=940a1ca976bfe21a12dbc96b47f5ce7d&workflow=preview