title: Cannot put overflow-y: visible in owl-carousel
body: <p>I was making navigation panel by using owl-carousel plugin with dropdowns</p>
  
  <p>But I have faced the problem that because the <code>overflow: hidden</code> attribute in <code>owl-carousel</code> I cannot display dropdown menu (it has <code>position: absolute</code>) because it is hidden under the <code>owl-carousel</code> div block. I have tried to give it <code>overflow-y: visible</code> but it did not work.</p>
  
  <p>my html code is </p>
  
  <pre><code>&lt;div class="owl-carousel"&gt;
      &lt;div class="inner-carousel"&gt;
          &lt;a href="#"&gt;Category 1&lt;/a&gt;
          &lt;div class="dropdown"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>my css code is</p>
  
  <pre><code>.inner-carousel .dropdown{
      position: relative;
  }
  .inner-carousel:hover .dropdown{
      display: block;
  }
  .dropdown ul{
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
  }
  .owl-carousel .owl-stage-outer{
      overflow-y: visible !important;
  }
  </code></pre>