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.
Remove overflow: hidden; from your nav it will work