Hi, I’m new to Webflow and building my first site.
I haven’t been able to build a dropdown menu with any success. After much hassle I found out that the drop down menu doesn’t show because it’s hidden behind the hero section. Only if I set the top margin of the dropdown list to a negative value I can see part of it.
How to solve this?
Hi Malixten,
Can you share your Webflow link?
I’ll need your webflow share link yo access the site on the backend.
Please follow the guidelines and post the link, so that I can try to help you 
https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link1
Sorry about that:
https://preview.webflow.com/preview/sandrastina?preview=149c91a8eef4bfd923a0eed47ef11e15
1 - On the Navigation bar and the meny elements set the Overflow to Visible:
2 - On the dropdown list (closed state), remove the styles on the display setting, max height, float, overflow and position:
3 - On the dropdown list (open state), remove the overflow and position styles:
4 - Finally, remove the margin from the drop link to prevent extra space on open:
You should be all set now 
How do I select “open state”? Not in the states drop down and can’t find it in the help docs…
Select the dropdown list element and on the settings tab, 
choose open menu, then get back to the design panel and you shall see the open state
Omg this is advanced! 
I found that the help videos really just talks about the styling of the menu, and not the building of it.
Thanks for the very clear and step by step guiding! I still have problem with a big block dropping down instead of just the green drop down list when hovering: https://preview.webflow.com/preview/sandrastina?preview=149c91a8eef4bfd923a0eed47ef11e15
That is because you need to remove the styles from the dropdown list before applying a secondary class, otherwise the styles will affect the new class instead.
To correct this:
1 - Remove the secondary style (drop) from the dropdown list
2 - On the Navigator tab select the dropdown list
Back to the design tab:
Remove the overflow and position styles (click on top of the blue style so that the remove option appears):
3 - Only after that, you will add the secondary drop style just to prevent extra margins on open.
Let me know if that makes sense
That didn’t work and that might be because I cannot do #1. There is only one style (class) on the dropdown list. It does not have “drop”. Only the navigation link has “drop” as secondary style.
This is the part of webflow where I’m 100% lost. Please make tutorials on the navigation bar!
If you select the Navigation Link you’ll see the drop class:
Click on the drop style and choose remove
I don’t get it, because you said I should remove the styles from the dropdown list - but it doesn’t have a secondary class. So you mean I should remove the secondary style from the navigation link instead?
Now I did just all that. If that was what you meant - what to do next to get the white block disappear?
Ok, here are the steps you need to follow at this point to solve this:
1 - From the Navigator choose the dropdown list
2 - Then go to the settings panel and choose “open menu”
3 - At the design panel remove the following styles: Max; Clear; Position (click on top of the highlighted blue to access the “Remove this style” panel).
Here is the final result:
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
