title: Dropdown Menu is not overlapping Slick Gallery
body: <p>I have jQuery Slick Gallery and inside it I have a Dropdown Menu. A button shows the currently selected entry and the menu entries are an unordered list which appear when the button is clicked.</p>
  
  <p>The unordered list is hidden at the bottom edge but should appear above the dots. You can see the problem also on the image below:
  <a href="https://i.stack.imgur.com/glFYH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/glFYH.png" alt="Visualization of Problem"></a></p>
  
  <p>An example what I try to do you can find here: <a href="http://jsfiddle.net/45cst6nq/" rel="nofollow noreferrer">http://jsfiddle.net/45cst6nq/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="slider"&gt;
    &lt;div&gt;
      &lt;ul class="list"&gt;
        &lt;li&gt;Please select&lt;/li&gt;
        &lt;li&gt;Point 1&lt;/li&gt;
        &lt;li&gt;Point 2&lt;/li&gt;
        &lt;li&gt;Point 3&lt;/li&gt;
        &lt;li&gt;Point 4&lt;/li&gt;
        &lt;li&gt;Point 5&lt;/li&gt;
        &lt;li&gt;Point 6&lt;/li&gt;
        &lt;li&gt;Point 7&lt;/li&gt;
        &lt;li&gt;Point 8&lt;/li&gt;
        &lt;li&gt;Point 9&lt;/li&gt;
        &lt;li&gt;Point 10&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div&gt;slide2&lt;/div&gt;
    &lt;div&gt;slide3&lt;/div&gt;
    &lt;div&gt;slide4&lt;/div&gt;
    &lt;div&gt;slide5&lt;/div&gt;
    &lt;div&gt;slide6&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>$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;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(".slider").slick({
      autoplay: false,
      dots: true,
      responsive: [{ 
          breakpoint: 500,
          settings: {
              dots: false,
              arrows: false,
              infinite: false,
              slidesToShow: 2,
              slidesToScroll: 2
          } 
      }]
  });
  </code></pre>
  
  <p>This is a simplyfied example to demonstrate the issue. The components I am showing on my customor project are a little bit more complex.</p>
  
  <p>I already tried to fix this with changing z-index and overflows. It looks like it's working when I set overflow-x to visible but than the cloned slides also get visible. Using <code>overflow-y: visible;</code> doesn't work.
  Why does only <code>overflow-x: visible</code> shows the list correctly overlapping, but <code>overflow-y: visible;</code> does not? For me this doesn't make sense.</p>
  
  <p>Is there a possibility to solve the issue? I like the slick gallery in general and don't want to write my own for this case.</p>