File-Tab Navigation Hover Effect

I need the hover state on the main navigation of my corporate WordPress site to mimic the look of a classic file-folder tab, exactly like the screenshot I’ve attached. The menu is already built and styled; the only piece missing is that distinctive tab-style hover that makes the current item look as if its “folder” is pulled forward above the rest.

Here’s what I’m after:
• Pure CSS (preferred) or a light touch of JavaScript only if absolutely necessary.
• The effect must work across modern browsers and remain responsive with the current theme.
• You’ll hand over the final CSS/JS snippet and a brief note explaining where to place it in my child theme so I can preserve changes through future updates.

Once I apply your code, hovering (and the active state) should clearly resemble the raised tab in the reference image, with smooth transitions and no layout shifts. If you’ve crafted similar navigation effects before, feel free to point me to a sample.

I will need the code to move over to my current site.