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

对于demo我只在Category1上构建了下拉菜单。 https://jsfiddle.net/just_vr/ye483e4v/7/

请帮忙。感谢

Answer 1

根据blonfu的评论，你不能有溢出-x滚动和溢出-y可见（https://www.w3.org/TR/css-overflow-3/#overflow-properties）。 overflow-y自动变为auto，这意味着滚动条也会显示为垂直。

如果您想要水平滚动和垂直下拉菜单，则必须使用javascript以编程方式执行此操作。我建议的一种方法是：

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

希望这会有所帮助。

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

1 个答案: