javascript - 使用下拉菜单滑动的水平菜单

Question

客户希望我构建一个下拉菜单，在悬停/单击时滑动并显示下拉菜单(因为它也适用于移动版本)。

该问题导致隐藏下拉菜单的 overflow-x 必须显示在框上方。 有解决办法吗？

<ul class="scroll-menu">
    <li class="scroll-one">HOME</li>
    <li class="scroll-one">CATEGORY 1
    <ul class="drop-w">
        <li class="dropp">dropdown</li>
        <li class="dropp">dropdown</li>
        <li class="dropp">dropdown</li>
        <li class="dropp">dropdown</li>
    </ul>
    </li>
    <li class="scroll-one">CATEGORY 2</li>
    <li class="scroll-one">CATEGORY 3</li>
    <li class="scroll-one">CATEGORY 4</li>
    <li class="scroll-one">CATEGORY 5</li>
    <li class="scroll-one">CATEGORY 6</li>
</ul>


.scroll-menu .scroll-one {
display: inline-block;
width:115px;
padding: 1%;

position: relative;

    list-style: none;
}
.scroll-one:hover .drop-w {
    display: inline-block;
}
.drop-w {
    display: inline-block;

    position: absolute;
    top: 30px;
    left: 5px;
    display: none;
}

为了演示，我只在 Category1 上构建了下拉菜单。 https://jsfiddle.net/just_vr/ye483e4v/7/

请帮忙。谢谢

Answer 1

根据 blonfu 的评论，您不能让 overflow-x 滚动和 overflow-y 可见(https://www.w3.org/TR/css-overflow-3/#overflow-properties)。 overflow-y 自动变为 auto，这意味着垂直方向也会出现滚动条。

如果您想要水平滚动和垂直下拉，则必须使用 javascript 以编程方式进行。我可以建议的一种方法是:

1. 将下拉列表从父 ul 中取出并使它们成为单独的列表，但在父 nav 元素内，该元素应该是主导航 ul 的父元素。
2. 使用 id 或类将它们与它们的父元素链接起来。
3. 使用 javascript，在通过点击选择父元素时，获取主导航元素相对于父容器的当前位置，然后将这些位置提供给相关的子菜单元素，并显示它们。
4. 如果需要，也可以对鼠标悬停事件执行相同的操作。

希望这对您有所帮助。