overflow-y visible does not work when using overflow-x hidden? [duplicate]

Question

I am using overflow-x hidden, which works. But you cant use overflow-y in-conjunction with it.

So I checked out this... http://www.brunildo.org/test/Overflowxy2.html

Am I missing something?

Basically this...

header {
   overflow-x: hidden;
   overflow-y: visible;
}

is exactly the same as using...

header {
   overflow-x: hidden;
   overflow-y: scroll;
}

Huh? If I wanted scroll I would use overflow-y: scroll; but it's using it anyway!

Why is this? How can I get round this. I can't do this... http://jsfiddle.net/xMddf/2/

Because in my situation, I need the header to have overflow-y: visible; so my dropdown navigation can be visible.

---

UPDATE

Please see my fiddle. Please make sure the view finder is bigger than 770px other wise the navigation switched to a mobile nav.

http://jsfiddle.net/joshmoto/42Sgu/

The aim of the game is to keep those RED keyline hidden in the the horizon (like it currently is)

But to allow the navigation drop down to be visible when hovered...

Answer 1

I think the property you're looking for is overflow-y:auto;

Update

It's not your absolute preferred solution, I'm sure, but this works:

http://jsfiddle.net/3zVc4/

Here's the meat of what I did.

#mid-row {
  overflow-x: hidden;
}
#top-row {
  overflow-x: hidden;
}

And then I removed the overflow-x and overflow-y rules from the header element.

Unfortunately, that's prescribed browser behavior from W3C, as I'm sure you know from searching on this topic. The only way around it is to apply overflow rules judiciously to the elements which need to be hidden.

Hope this helps!