CSS ignore overflow: hidden

Question

I'm working on the navigation for this website and am having trouble with the dropdown nav.

Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.

For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.

Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.

Any suggestions to achieve the same result are also welcome.

My work computer was crawling whilst viewing that site. Just sayin'. — alex, Aug 16 '11 at 05:59
@Marty I suggest you take this back to a simple solution. For example. the nav. Make it relative, remove the height, margin and overflow and add `top: -60px;`. Much simpler and you'll start to get the result you want. Also make your content positioned relative and z-index at 100. — James Khoury, Aug 16 '11 at 06:37

score 55 · Answer 1 · edited Sep 02 '16 at 13:00

55

Solution: Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule. Demo: http://jsfiddle.net/88fYK/5/

edited Sep 02 '16 at 13:00

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2,754
1
26
39

answered Feb 21 '12 at 14:39

Serg Hospodarets

4,658
4
25
31

1

This does not work if position relative is needed in an element between the element with overflow and the element with position absolute. Any Idea? http://jsfiddle.net/88fYK/439/ – Charles Jul 06 '14 at 08:03
1

It doesn't work properly even if you need to scroll the content of the box. – Fez Vrasta Apr 07 '15 at 15:08
@charles In your demo the method works as expected. If really you really need box with `position:realtive;` between `overflow:hidden` and `position:absolute`- move block with `position:absolute` as child to the `
` element.
– Serg Hospodarets Apr 07 '15 at 20:09
@FezVrasta please describe you comment in more details or provide a demo. – Serg Hospodarets Apr 07 '15 at 20:10
@SergeyGospodarets say you need to open a dropdown inside a scrolling div of 500x500px, the dropdown is 200x800 and it will correctly go outside the boundaries, if you then scroll the content of the div, the dropdown will stay fixed in that position instead of scroll with the content. – Fez Vrasta Apr 08 '15 at 07:46
2

@FezVrasta in that case use another techniques, e.g. as usual- http://stackoverflow.com/questions/7074114/css-ignore-overflow-hidden/9379435?noredirect=1#comment47159243_9379435 – Serg Hospodarets Apr 13 '15 at 19:52
2

I had to set `position: static;`. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Sep 02 '16 at 11:01

score 22 · Accepted Answer · answered Aug 16 '11 at 05:58

22

overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.

answered Aug 16 '11 at 05:58

alex

479,566
201
878
984

1

Do you think that moving the contents of my subnav out of the navigation container and into a separate container is a viable solution? (via JQuery) – Marty Aug 16 '11 at 06:06
@Marty I haven't had a too in-depth dig, but that might work. – alex Aug 16 '11 at 06:20

score 6 · Answer 3 · edited Dec 19 '12 at 00:35

6

Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.

edited Dec 19 '12 at 00:35

alex

479,566
201
878
984

answered Nov 08 '11 at 20:44

puppybits

1,110
12
16

Doesnt work for IE. Position fixed will not remove the element and move it, the element will still be clipped by the parent it was initially added to if that has overflow hidden. But if you have control over the code making the dropdown you can always add it to the end of the body instead since position fixed is always relative to browser top left corner. – Johncl Apr 13 '15 at 10:50

score 3 · Answer 4 · answered May 28 '15 at 16:25

3

if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"

.container {
  overflow: hidden;
}

.your_dropdown_menu {
  position: absolute;
}

answered May 28 '15 at 16:25

Haimei

12,577
3
50
36

depending on your HTML, you can just set your
– Oddacon Feb 26 '18 at 17:05

score 1 · Answer 5 · answered Dec 04 '18 at 04:36

1

try to put position:fixed on dropdown content.

.dropdown-content{
   position:fixed
}

answered Dec 04 '18 at 04:36

Shadow

11
1

score -2 · Answer 6 · answered Mar 06 '19 at 06:42

For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that

CSS ignore overflow: hidden

6 Answers6

Linked