Dropdown above another dropdown

Usually the dropdown list opens up above other elements that come after the dropdown. If you have two dropdown elements arranged vertically, the list of the first dropdown element opens up below the second dropdown element.

I tried working with z-index, making the the dropdown and/or dropdown-toggle lower level than the dropdown-list, but it doesn’t work out.

Here is a link:
https://webflow.com/design/forum-test?preview=4aee8c56903ff502d13e1a2f0f864f71

Many thanks

Remove all the z-index properties you’ve set (click on the blue label z-index then remove). So for your dd element and your dropdown. It’s messy because your dd is shared at 1 and the manu at 10 is the child of the dd at 1.

Give a unique class to each of your ROWS, then position:relative then z-index 2 for the upper row, 1 for the lower row. Now it should work.

http://cl.ly/image/0f2b0b1C2J0U/drgif.gif

2 Likes

That works for me. Thanks a lot.

1 Like

Have the same problem, but have 50 rows, so this workaround is a mess for me to use, is there no other way to do this?

BTW a bit funna, but this page actually have z-index problems as the text overlays the top menu while you scroll:-).

/Micke