不能把溢出-y：在owl-carousel中可见

Question

我正在使用owl-carousel插件制作导航面板，并带有下拉列表

但是我遇到了问题，因为overflow: hidden中的owl-carousel属性我无法显示下拉菜单（它有position: absolute），因为它隐藏在owl-carousel div下块。我试图给它overflow-y: visible，但它不起作用。

我的HTML代码是

<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>

我的css代码是

.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;
}