How can I make my dropdown be above my content?

This is my website: https://zarmdev.github.io/To-doz/index.html

When I hover over the +, it doesn’t overlap the panes (the squares with text).

I gave it and it’s parent a z-index of 10 and the panes a z-index of 0.

CSS for the pane

.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: ‘Open Sans’, sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: 0; /* Z-index set here */
}

CSS for the dropdown

#dropdown {
position: relative;
display: inline-block;
z-index: 10;
}

#dropdown-content {
display: none;
position: absolute;
background-color: rgba(128, 128, 128, 0.534);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 8px 12px;
z-index: 10;
}

Also please explain well if you have an answer.

If you downvote comment why.

To see for yourself, first hover over the + button and press the other + button a few times.