Dropdown hiding behind the header

Question

I'm creating a header and I have multiple items in the header like contact, products etc.

So, I'm creating Products with a dropdown, and if I hover then dropdown should appear.

But due to some issue in my styling it goes behind the header.

Here is codesandbox - https://codesandbox.io/s/youthful-worker-btgscc?file=/src/Components/Header.jsx

I'm thinking that this issue is mostly caused by z-index but I tried playing around with it, didn't work.

Answer 1

Remove overflow: hidden; from your nav it will work