CSS: overflow-y: scroll; overflow-x: visible

Question

See the following post for a picture highlighting my question and a potential solution:

CSS overflow-y:visible, overflow-x:scroll

However, this strategy breaks w

Answer 1

I ended up implementing this using javascript, using the getPos function from this question.

The end product looks like:

var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
   var hovered = e.srcElement;
   var pos = getPos(hovered);
   pos.x += hovered.offsetWidth;
   pos.y -= scrollPanel.scrollTop;
   tooltip.style.setProperty('left', pos.x);
   tooltip.style.setProperty('top', pos.y);
}

Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.

Too bad there's no elegant/CSS way to do this, but at least this works.

Answer 2

I guess you should use position:absolute instead of position:fixed.

.parent { overflow-y:scroll; width:100%; height:100px; }
.child { position:relative; }
.child .child-menu { position: absolute; left: 80px;width:200px; top:0px; border: 1px solid black; background-color: green; display: none; }
.child:hover .child-menu { display: block; }

Fiddle demo, http://jsfiddle.net/68fBE/2/