In my jQuery Slick Gallery, I have a Dropdown Menu that displays an unordered list of menu entries when a button is clicked. The issue I am facing is that the unordered list is hidden at the bottom edge instead of appearing above the dots as intended. You can see the problem in the image below: https://i.sstatic.net/glFYH.png
To see what I am trying to achieve, you can check out this example: http://jsfiddle.net/45cst6nq/
HTML
<section class="slider">
<div>
<ul class="list">
<li>Please select</li>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
<li>Point 5</li>
<li>Point 6</li>
<li>Point 7</li>
<li>Point 8</li>
<li>Point 9</li>
<li>Point 10</li>
</ul>
</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
CSS
$c1: #3a8999;
$c2: #e84a69;
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: $c1;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: $c2;
}
.list {
position: absolute;
top: 0;
}
JS
$(".slider").slick({
autoplay: false,
dots: true,
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
This example demonstrates the issue I'm facing with the slick gallery. Although I've tried adjusting z-index and overflows, setting overflow-x: visible; seems to work but it makes the cloned slides also visible. On the other hand, using overflow-y: visible; does not resolve the problem. This inconsistency is confusing to me.
Is there a way to solve this issue without having to create a custom gallery from scratch?