CSS overflow-y:visible, overflow-x:scroll
Solution 1:
I figured it out!
The parent should be overflow:auto; The .child should be position:relative; The .child-menu should be position:fixed; with NO top or left positioning. If you do this, it will keep it it inline with the content.
If you need to move the child-menu use margins and not top or left. Example margin-left:-100px;
EDIT
As it seems people still use this, please note that you will have to use javascript to move the fixed items as the page scrolls.
Solution 2:
It solved here! They use css and JS.
.child:hover .child-menu { display: block; }
.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px }
.child { position:static; }
.child-menu { position:absolute; display:inline-block; display: none; }
https://css-tricks.com/popping-hidden-overflow/
https://jsfiddle.net/68fBE/2/