Dropdown hiding behind the header-CodePudding

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.

CodePudding user response：

Remove overflow: hidden; from your nav it will work

CodePudding user response：

You need to remove overflow:hidden; . please find below updated style.

.skid-row-tabs nav {
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;

  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
}