Dropdown menu overlaid by the content-CodePudding

The current theme of my WordPress website has two menus, a top menu and a bottom menu

The dropdown menu of the bottom menu are overlaid by the above content for example

I tried to perform the setup of the z-index, putting z-index: 20000 for example, but it didn't work for example

Does anyone have any idea on how to fix it?

My WordPress website: www.rodrigocorrea.me

CSS:

@media (min-width: 43.75em)
.menu-footer-items .sub-menu:hover {
    bottom: 24px;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media (min-width: 43.75em)
.menu-footer-items .sub-menu {
    position: absolute;
    background: #1A1A1A;
    text-align: center;
    margin: 0;
    min-width: 100%;
    max-width: 220px;
    left: auto;
    right: auto;
    bottom: -9999px;
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.menu-footer-items ul {
    list-style: none;
}

CodePudding user response：

Remove overflow from footer: Set custom css:

footer.site-footer {
    overflow: initial !important;
}