Search code examples
htmlcsstransformz-index

CSS dropdown menu hides behind content (z-index not working due to transform)


I'm working on developing a submenu with dropdown but when the menu is expanded, the content hides below the next grey content section. I also tried to set the z-index of the expanding ul-element to e. g. 999999, but it hides anyway.
I assume it might be related to the transform function of the ul-element which has its own stacking rules, but I have no clue how to resolve it. Any hints would be very helpful.

.c-serviceMenu--active ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(-1px);
    transition-delay: 0s;
    z-index: 999999;
}

JSfiddle https://jsfiddle.net/umpg89jo/7/

Thank you.


Solution

  • remove overflow: hidden; from section