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

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>

这是一个“滑动”菜单 - menu-viewport div 需要隐藏溢出，而您看到的 ul.level-1 具有从 JavaScript 计算的值（它是一个用箭头滚动的长项目列表）

问题是因为overflow:hidden，“dropdown”里面的内容没有显示出来，即使它设置为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>