3

I was making navigation panel by using owl-carousel plugin with dropdowns

But I have faced the problem that because the overflow: hidden attribute in owl-carousel I cannot display dropdown menu (it has position: absolute) because it is hidden under the owl-carousel div block. I have tried to give it overflow-y: visible but it did not work.

my html code is 

<div class="owl-carousel">
    <div class="inner-carousel">
        <a href="#">Category 1</a>
        <div class="dropdown">
            <ul>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul>
        </div>
    </div>
 </div>

my css code is

.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;
}
Bucket
  • 7,415
  • 9
  • 35
  • 45
Anvar Abdulsatarov
  • 97
  • 1
  • 8
  • 1
    Most custom dropdowns append the dropdown list just before the closing `

    ` tag and dynamically position it to prevent these kind of overflow issues. Owl carousel probably has a good reason to hide overflow so I wouldn't recommend messing with that. Instead maybe tryout a custom dropdown plugin like [select2](https://select2.org/) which has already solved this problem.

     – zgood Mar 09 '18 at 16:50
  • Possible duplicate of [CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue](https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue) – SpaceDogCS Mar 09 '18 at 16:57
  • You cant hide x and turn visible y, or you set overflow: visible to all and hide left and right in other way, or you set the dropdown outside the carousel and position with javascript – SpaceDogCS Mar 09 '18 at 17:00

0 Answers0