I’ll spare you the tale of the frustration that led me to this discovery and get right to the juice.
<<edit: I thought this was a bug but it’s actually a quirk with z-index. See the solution at the bottom.>>
Clone-able and read-only links at the bottom.
Explaination:
This technique will allow you to make a dropdown menu or tabbed menu using the CSS filter setting. This works very differently than show/hide because you can make a menu appear/disappear when a sibiling element is hovered. You would normally accomplish this with interactions, but this technique uses only CSS - no Javascript interactions. I don’t know why it works.
STEPS TO RECREATE:
Setting up the menu:
Make a parent div with two children
one child is the label and the other is the dropdown menu
color the label & give it a height & width to make it visible
put a few visible elements inside the dropdown menu div
set the dropdown menu to position absolute and add a few dozen pixels to the top to push the menu below the label
set overflow: hidden on the dropdown parent
Vital steps:
add any filter to the parent div
add a hover effect to the parent div that removes the filter
Result:
The dropdown menu/ tabbed menu will be invisible when not hovered and appear when hovered.
Again, any filter will do this. Use a filter that looks good on the trigger and you have a surprisingly simple and elegant way to make a tab or dropdown menu with hover reveal. You can use “pressed” instead of “hover” and it works the same (the menu will hide again on hover out or releasing the click though)
Hey Taylor. First of all, thanks for sharing that with the community! It always feels good to mess around and discover new things.
For those who are wondering why this is happening, it’s not a bug. It’s not even a Webflow thing. What you see here is a classic case of Z-index stacking context, an advanced CSS concept. Many of you probably know what a Z-index is. It’s a CSS property that sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Most of us are used to work with a limited number of stacking contexts, usually by changing the position of an element from static to any other value. What goes unnoticed sometimes though is that there are other ways to create stacking contexts, one of which is setting filters. That’s why the menu that Taylor built behaves that way. You can have the same effect if instead of using a filter that you remove on hover, you position the ‘.dropdown-parent’ to relative for example, and then position it back to static on hover. Here is a great article by Philip Walton written in 2013 talking further about the stacking context. For a more detailed article, this should feed your curiosity.
It’s good to be aware of the concept of stacking contexts because even though you probably won’t need to use it directly, it can help you fix some errors that may seem as bugs otherwise. This just shows how complex and fascinating development can be, and that there’s always something new to learn. Thanks again Taylor for sharing that with us and turning this into a great learning opportunity!
Thank you so much for the explanation, Bavly. I spent hours trying to figure out why this worked. I couldn’t find any literature on the issue without knowing what was causing it. I appreciate the extra reading - I’ll check that out.
I will try to learn from your attitude about quirks like these being “fascinating” “opportunities” rather than frustrating nightmares haha!