Marty Marty - 3 months ago 48
CSS Question

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.

Answer

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