Javascript 使用下拉菜单滑动的水平菜单

客户想让我建立一个下拉菜单，当鼠标悬停/点击时，滑动并显示下拉菜单（因为它也适用于移动版本）

该问题导致溢出-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;
}

主页
第一类

下拉列表
下拉列表
下拉列表
下拉列表


第2类
第三类
第4类
第5类
第6类

.滚动菜单。滚动一个{
显示：内联块；
宽度：115px；
填充：1%；
位置：相对位置；
列表样式：无；
}
.滚动一：悬停。下拉-w{
显示：内联块；
}
.drop-w{
显示：内联块；
位置：绝对位置；
顶部：30px；
左：5px；
显示：无；
}

对于演示，我只在Category1上构建了下拉菜单。

---

请帮忙。谢谢

根据blonfu的评论，您不能让overflow-x滚动和overflow-y可见（）。overflow-y自动变为自动，这意味着垂直方向也会出现一个滚动条

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

将下拉列表从父ul中删除，并将其单独列出，但应在主nav ul的父nav元素中

使用id或类将它们与其父元素链接起来

使用javascript，通过单击选择父元素时，获取主导航元素相对于父容器的当前位置，然后将这些位置提供给相关子菜单元素，并显示它们

如果您愿意，也可以对鼠标悬停事件执行相同的操作

---

希望这有帮助

你能再解释一下吗？是否要在滚动条后显示菜单？是的，在滚动条后。«计算值：如指定，如果

overflow-x

或

overflow-y

中的一个不可见，则使用可见计算到

auto

。非常感谢您的详细回答。我根据你的答案制作了这个，真的很有帮助。很高兴能帮上忙！