Наложение всплывающего меню CSS не показывает поверх содержимого в мегаменю ⇐ CSS

[Anonymous]

Я пытаюсь создать всплывающее окно в мегаменю, но оно не отображается поверх содержимого.
(Добавлен класс .mega-menu до первого URL в главной навигации.)
Вот мой CSS:
Вот мой HTML:

Код: Выделить всё

@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu>ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
background-color: #fff;
box-shadow: 0px 0px 10px 0px #999;
padding: 2% 2% 5% 2%;
}
nav .main-nav .mega-menu>ul>li>a {
font-weight: bold;
text-decoration: underline;
color: #C1151E;
padding-bottom: 0;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu>ul>li:hover>a,
nav .main-nav .mega-menu>ul>li:focus>a,
nav .main-nav .mega-menu>ul>li[class*="current-"]>a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
nav .main-nav .mega-menu>ul ul ul {
position: static;
display: block;
margin-left: 0px;
float: none;
}
.main-navigation .main-nav ul ul li a {
padding-bottom: 7px;
font-weight: bold;
}
.main-navigation .main-nav ul ul ul ul li a {
font-weight: normal;
}
.main-navigation .main-nav ul ul ul ul li:hover a {
background-color: #C1151E;
color: #fff;
}
.main-navigation .main-nav ul ul ul ul li:not([class*="current-menu-"]):hover>a {
color: #fff;
}
/* Styling for Sub-Sub (Events) Nav Flyouts */
nav .main-nav .mega-menu>ul>li>ul>li>ul>li:hover>ul.sub-menu {
box-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
display: block !important;
float: left;
margin: 0;
position: absolute;
visibility: visible;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
}
nav .main-nav .mega-menu>ul>li>ul>li>ul>li>ul.sub-menu {
visibility: hidden;
display: none !important;
position: absolute;
right: 0;
top: 0;
width:  100%;
}
}

Код: Выделить всё

[list]
[*]
[url=#]Sports[/url]



[url=#]Baseball[/url]

[url=#]Leagues[/url]
[*][url=#]Tournaments[/url]
[*][url=#]Camps[/url]
[*][url=#]Sponsorships[/url]
[*][url=#]Events[/url]

[url=#]Cathedral City,  CA Spring Series[/url]

[url=#]Registration Info[/url]
[*][url=#]Schedule[/url]
[*][url=#]Standings[/url]
[*][url=#]Event Sponsorship[/url]
[/list]

[*][url=#]Mesa, AZ Summer Camp[/url]




[*][url=#]Softball[/url]
[list]
[url=#]Leagues[/url]
[*][url=#]Tournaments[/url]
[*][url=#]Camps[/url]
[*][url=#]Sponsorships[/url]
[*][url=#]Events[/url]

[url=#]Cathedral City,  CA Spring Series[/url]
[/list]



[*][url=#]Rugby[/url]
[list]
[url=#]Leagues[/url]
[*][url=#]Tournaments[/url]
[*][url=#]Camps[/url]
[*][url=#]Sponsorships[/url]
[*][url=#]Events[/url]

[url=#]Cathedral City, CA Spring Series[/url]
[/list]





[*][url=#]About[/url]
[*][url=#]Sponsorship[/url]
[*][url=#]News[/url]
[*][url=#]Register[/url]

Я пробовал добавлять z-индекс к различным элементам ul и li. , но, похоже, не работает. Есть ли у кого-нибудь какие-либо идеи о том, что мне нужно добавить в свой CSS?

Подробнее здесь: https://stackoverflow.com/questions/784 ... -mega-menu