无法进行下拉工作

Question

我有这个下拉列表，为了让它发挥作用，我看到只有一个解决方案正在取消溢出，但如果我接受它就会保持这样：

但如果我应用溢出：隐藏它就像这样：

我怎样才能做到这一点。我尝试在其他div中应用溢出：隐藏; ，但是没有工作。

网站链接：http://store01.titus.biz/

<div class="span12 horizontal-category" style="overflow: hidden">                                 
       <span class="carousel-prev disabled" id="carousel-category-prev"></span>
       <ul class="nav myCustomNav">       
    <li class="dropdown"></li>
        ... </ul>
</div>

Answer 1

您可以尝试使用剪辑。首先删除div.span12.horizo​​ntal-category上的溢出。然后在两个控制按钮#carousel-category-prev，＃carousel-category-next之间的div上添加一个剪辑rect。但是绝对的位置需要使用裁剪。但这应该没问题。

<div class="span12 horizontal-category">
    <span id="carousel-category-prev" class="carousel-prev disabled"></span>
    <div  style="position: absolute; clip: rect(auto, auto, 500px, auto);"></div>
    <span id="carousel-category-next" class="carousel-next"></span>
</div>

这应该剪掉左右两侧的溢出。然后将底部（500px）增加到您需要的任何值。剪切是控制溢出如何工作的一种方法。

Answer 2

这可能对您有所帮助：

从class="span12 horizontal-category"移除溢出：隐藏 将溢出：隐藏添加到class="main-container"。

你可以给控制按钮，如../img/button-prev-disabled.png白色背景，这样当你向左和向右滑动时，你就看不到菜单的角落。

Answer 3

我试一试，首先让ul有足够的高度来显示下拉菜单，然后将margin-top: -xxxpx应用到ul下面的元素。

我在Chrome中测试了以下代码：

1. 将margin-bottom: 200px;修改为.horizontal-category ul
2. 将margin-top: -180px;添加到.ei-slider

这种方式不需要CSS3，因此它具有更强的兼容性。测试一下！