当容器设置为溢出隐藏时，是否可以看到超出容器尺寸的内容？ [英] Is it possible to see content that goes outside a container's dimensions when the container is set to Overflow hidden?

问题描述

CSS下拉菜单isn'即使完全定位，因为溢出：隐藏

我正在建立一个大型下拉菜单。

I am building a mega dropdown menu.

HTML看起来有点像这样：

The HTML looks a bit like that:

<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计算的值（它是一个很长的项目列表，用箭头滚动）

This is a "sliding" menu - the menu-viewport div needs to have overflow hidden while the ul.level-1 as you see has a value calculated from JavaScript (it's a long list of items that scrolls with arrows)

问题是因为溢出：hidden

The problem is that because of the overflow: hidden, the content inside "dropdown" is not shown, even if it's set to position:absolute.

您是否看到有关此问题的任何方法？

Do you see any way around this problem?

推荐答案

仅隐藏左侧和右侧的内容

Only hide the content on the left and right side

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

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

Also you submenu should have the following structure. No divs and paragraphs.

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

这篇关于当容器设置为溢出隐藏时，是否可以看到超出容器尺寸的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！