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

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.

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/