I have read this CSS overflow-x hidden and overflow-y visible (and a lot of other posts) but i can't get this to work in my specific case.
I'm using ths slick-slider and want to add dropdown-navigation. so i have to use a special markup.
The dropdown should overflow the slider.
I recreated the problem in the fiddle
Thank you for your help!
Setting overflow-x or overflow-y to hidden causes the other to be treated as if it has a value of auto. So slick-slider adds a scrollbar for any overflow in the y direction.
You can normally get around this by adding position: absolute. However, absolute positioning is based on the closest parent element with relative positioning. In this case, that's slick-slide, which is a child of slick-slider. As a result the dropdown is still positioned inside of slick-slider and doesn't overflow.
To resolve the issue remove position: relative from all classes that currently have it. I recommend adding position: relative to the wrapper class as well.
The problem is in .slick-slider class. If you set a little bigger height you can get past overflow, although I don't know why overflow:visible doesn't work.
