Is it possible to see content that goes outside a container's dimensions when the container is set to Overflow hidden?

Question

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

I am building a mega dropdown menu.

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>

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)

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?

Is is possible to provide a demo link or a jsfiddle? – Vangel Tzo Feb 14 '14 at 13:06 — Vangel Tzo, Feb 14 '14 at 13:06

user2255273 · Answer 1 · 2014-02-14T14:45:39.507

1

Only hide the content on the left and right side

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

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>

edited Feb 14 '14 at 14:45

answered Feb 14 '14 at 13:11

user2255273

948
1
11
29

it doesnt seem to work.. although in theory it should – George Katsanos Feb 14 '14 at 13:29
I disable overflow entirely and I see my content, when I set overflow-x: hidden I still don't see it :( – George Katsanos Feb 14 '14 at 13:34
Then maybe [this will work for you](http://stackoverflow.com/questions/10522137/allowing-for-overflow-on-the-y-axis-while-hiding-overflow-on-the-x-axis) – user2255273 Feb 14 '14 at 13:51
it doesnt unfortunately – George Katsanos Feb 14 '14 at 14:20
Then you will have to provide me with your css code – user2255273 Feb 14 '14 at 14:33
Looking at your example, you have way too many divs around your menu.. One of those has to be the problem. But I can't test it because you have no submenus in your demo. – user2255273 Feb 14 '14 at 14:41
I looked a bit around, you can't have overflow-x:hidden and overflow-y:visible , because the CSS spec sets overflow-y to auto thus you have scrollbars. That's what I also get. Scrollbars. – George Katsanos Feb 14 '14 at 15:07
http://stackoverflow.com/questions/26294501/css-dropdown-menu-isnt-shown-even-though-absolutely-positioned-because-of-overf – George Katsanos Oct 10 '14 at 08:04

Is it possible to see content that goes outside a container's dimensions when the container is set to Overflow hidden?

1 Answers1

Linked