Hide element only ABOVE its parent!? - CSS

Hey I am making a portfolio and have a dropdown menu, it drops down through CSS animations however I want it to disappear as though it is going behind the navigation bar.

I have tried loads of positioning and z-index things, it is always above the navbar and over the page above the navbar wherever it is. I want to make it look as though it is collapsing into the navbar.

Find a pen of my test project here:

Any help is appreciated.

Read about stacking context.

Also I hope you didn’t write those browser prefixes by hand :smirk:

I read about stacking context hence why I positioned and used z-index, I even moved the submenu so it wasnt the child. Do you have a solution?

Solution: used a vertical down animation rather than actually transposing the element up.