27

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.

Improve this question
2
  • 2
    My work computer was crawling whilst viewing that site. Just sayin'. Commented Aug 16, 2011 at 5:59
  • 1
    @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. Commented Aug 16, 2011 at 6:37

6 Answers 6

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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? jsfiddle.net/88fYK/439
It doesn't work properly even if you need to scroll the content of the box.
@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 <body/> element.
@FezVrasta in that case use another techniques, e.g. as usual- stackoverflow.com/questions/7074114/css-ignore-overflow-hidden/…
I had to set position: static;.
|
22

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

Improve this answer

2 Comments

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 I haven't had a too in-depth dig, but that might work.
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.

Improve this answer

1 Comment

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.
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;
}
Improve this answer

1 Comment

depending on your HTML, you can just set your <ul> tag for your dropdown menu to: position: absolute; you don't even need to hide the overflow of the container.
1

try to put position:fixed on dropdown content.

.dropdown-content{
   position:fixed
}
Improve this answer

Comments

-3

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.