html - CSS : Overflow-x: hidden, Overflow-y:在带有下拉菜单的轮播中可见

Question

这是我的问题。我有一个旋转木马，它也像菜单一样。当选项卡的数量高于浏览器可用的宽度空间时，将出现轮播控件。一切正常。但我还在每个选项卡上添加了一个下拉菜单，这就是问题所在。如果我设置 overflow:visible，我们可以看到选项卡滑入和滑出 div，这非常难看。

如果我放置 overflow:hidden， slider 可以正常工作，但是，我再也看不到我的下拉菜单，因为它们也被垂直隐藏了。我尝试放置 overflow-y: visible 和 overflow-x:hidden 但这不起作用，因为如果“x”可见，如果“y”不同，它将被视为自动。换句话说，我的 slider 可以工作，但是添加了一个滚动条来显示我的下拉菜单，这非常难看。

我在另一篇文章中看到将它包裹在一个更大的容器中，我只隐藏了“x”，而我的“y”将落回更大的容器中。我不能那样做，因为如果不维护结构，我的旋转木马将会损坏。

所以我的问题是:我该怎么做才能让我的 slider 看起来不错(我们看不到选项卡滑入和滑出)以及显示我的下拉菜单!

如果您想查看此链接，请点击此处:https://decktogo.com/pages/downloads_user-manual_brochures

在大屏幕上，您不会看到任何错误。调整浏览器窗口的大小，使其宽度约为 380 像素。 slider 将发挥作用，您会看到一团糟。

如果你想要我的代码，你可以右键单击并检查我的网站页面以查看那里的所有代码。

谢谢你的帮助，乔纳森

Answer 1

问题解决了!不幸的是，它似乎没有一个好的答案。所以我做了一个 overflow-x: hidden ，这样我的轮播就可以正常工作了。为了解决下拉问题，我将 height:400px 和 margin-bottom:-300px 放在一起，这会导致最终看起来很好，所有它应该是什么。不幸的是，overflow-x 和 overflow-y 不能以这种方式工作。

.download .carousel-inner.onebyone-carosel { 
  margin:0 40px;
  overflow-x:hidden;
  width: auto;
  height: 400px;
  margin-bottom:-300px;
  z-index: 4;
}

.download .carousel-inner{
  overflow: initial;
}