Hi,
When I hover the “Support” dropdown menu and move the cursor around the “Training” link in the dropdown menu, the menu turns invisible. If I slowly move the cursor up, you can see the links are still “there”, I just can’t see them? Any thoughts to why this is happening?
I’ve added the read-only link below
Thanks,
Joel
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
This sounds like an issue with the “z-order”. Every container on the page is drawn in it’s z-order, starting from 0 and progressing upwards. So objects at “z-order = 0” get drawn, then objects at z-order=1, then z-order=2, and so on.
Note: I call this “z-order” from my coding days. Webflow refers to this property as “Z-index”.
Z-order is also hierarchical. If a parent container has a z-order of 0, it might have child elements with higher z-orders. Those higher z-orders are rendered as part of rendering the parent’s z-order level. In other words, if the parent is Z-order 1, all of its children get drawn at z-order 1. A child at z-order 2 will draw after (“on top of”) a child at z-order 1, but all of the children will be drawn before their parent’s sibling at Z-order 2.
To see the specifics of setting Z-order in Webflow, check out the guide to Applying a Z-Index Value.
My suspicion is that the parent of your dropdown menu comes before the parent of the rest of the site in the z-order. Changing the z-order of the parent container should move it to the front and make it visible.
Be careful, clickable elements that get stacked over each other can open up the door to a lot of unintended behavior. Depending on the nature of how you build your containers, the click might be captured by the top-most element, or it can register on multiple layers.
Hi @snapstream, did you manage to get the styling updated? I took a look and seems to be working at my end:
