Question

CSS Dropdown menu isn't shown even though absolutely positioned because of overflow: hidden

我正在构建一个超级下拉菜单。

HTML看起来有点像：

<div class="menu-viewport">
    <ul class="menu level-1" style="width: 2609px;">
        <li class="menu-item has-children first menuslider-slide">
            <a href="/ddd">DDD</a>
            <div class="dropdown">
                <p>rfpogjfgfdggffdd'j</p>
                <p>rfdsfgfgfgd'j</p>
            </div>
        </li>
        <li class="menu-item has-children menuslider-slide">
            <a href="/sex">sex</a>
        </li>
        <li class="menu-item menuslider-slide">
            <a href="/fff-3">FFF</a>
        </li>
        <li class="menu-item menuslider-slide">
            <a href="/fff-4">FFF</a>
        </li>
        <li class="menu-item menuslider-slide">
            <a href="/fff-5">FFF</a>
        </li>
        <li class="menu-item menuslider-slide">
            <a href="/www">WWW</a>
        </li>
    </ul>
</div>

这是一个“滑动”菜单 - 菜单视口div需要隐藏溢出，而你看到的ul.level-1有一个从JavaScript计算的值（它是一个用箭头滚动的长项列表）< / p>

问题在于，由于溢出：隐藏，“下拉列表”中的内容未显示，即使它被设置为position：absolute。

你有没有看到解决这个问题的方法？

Answer 1

仅隐藏左侧和右侧的内容

.menu-viewport {
    overflow-x:hidden;
}

此外，子菜单应具有以下结构。没有div和段落。

<ul>
    <li>
        <a href="#>item with submenu</a>
        <ul>
            <li><a href="#>subItem1</a></li>
            <li><a href="#>subItem2</a></li>
            <li><a href="#>subItem3</a></li>
            <li><a href="#>subItem4</a></li>
        <ul>
    </li>
    <li>
        <a href="#>item without submenu</a>
    </li>
</ul>

当容器设置为隐藏溢出时，是否可以看到超出容器尺寸的内容？

1 个答案: