Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS ignore overflow: hidden

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.

like image 292
Marty Avatar asked Aug 16 '11 05:08

Marty


People also ask

How do I break out of overflow hidden?

We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden". We can break out, if we remove the top:100% and set position to fixed .

Why does overflow hidden not work?

It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.

Why is overflow hidden?

overflow : hidden is a property which will make any text going out of your div as hidden i.e. it will not be shown on screen and will be clipped. overflow : auto will make scroll bar's appear if the text goes out of your div.

What is overflow hidden in HTML?

With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.


2 Answers

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/

like image 58
Serg Hospodarets Avatar answered Sep 18 '22 15:09

Serg Hospodarets


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

like image 25
alex Avatar answered Sep 19 '22 15:09

alex