开发者

CSS ignore overflow: hidden

开发者 https://www.devze.com 2023-03-28 13:43 出处:网络
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 ro

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.


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/


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


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.


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


try to put position:fixed on dropdown content.

.dropdown-content{
   position:fixed
}


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

0

精彩评论

暂无评论...
验证码 换一张
取 消