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/