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

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 需要 overflow hidden ，而你看到的 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>