Dropdown menu show behind div - z-index, overflow, position not working - css

Question

I need some help with a dropdown menu that's hiding behind a div. I tried setting the z-index to higher value, set the li to position:relative, checked for overflow in css (none). I see these as common causes for this issue, but nothing works for me.
Please note that z-index, positive and negative, were added whilst trying to find a solution. It makes no difference.
NOTE: dropdown is hiding behind "text-on-banner", yet showing in front of "main-banner".
Thanks for looking at this.
HTML:
<div class="wrapper">
<div class="header">
<ul class="PrimaryNav with-indicator">
<li class="Nav-item">
A
<li class="Nav-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">B</a>
<ul class="dropdown-menu">
<li class="Nav-subitem">B.1</li>
<li class="Nav-subitem">B.2</li>
<li class="Nav-subitem">B.3</li>
</ul>
<li class="Nav-item">
C
</ul>
</div>
</div>
<div class="section-wrapper">
<div class="main-banner">
<div class="text-on-banner">
<h2><strong>SOME TEXT HERE</strong></h2>
</div>
</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.header {
width: 100%;
background: #26282c;
color: #f5f5f5;
text-align: center;
}
.PrimaryNav {
list-style: none;
margin: 7px auto;
max-width: 1220px;
padding: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 130%;
font-weight: 600;
}
.with-indicator {
position: relative;
z-index: 0;
}
.Nav-item {
background: #26282c;
display: block;
float: left;
margin: 0;
padding: 0;
width: 14.28%;
text-align: center;
}
.Nav-item a {
color: #c2c5ca;
display: block;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
}
.Nav-subitem {
background: #26282c;
display: inline-block;
width: 100%;
text-align: center;
position: relative;
z-index: 999999;
}
.section-wrapper {
max-width: 1250px;
margin: auto;
padding: 20px 0 0 0;
}
.main-banner {
text-align: center;
font-weight: 700;
font-family: 'Titillium Web', sans-serif;
font-size: 36px;
line-height: 40px;
padding: 10px 2px 1px 2px;
color: #26282c;
box-shadow:
inset 0 0 0 1px rgba(232, 45, 0, 0.1),
inset 0 0 5px rgba(232, 45, 0, 0.2),
inset -285px 0 35px white;
border-radius: 10px;
background: #fff url(banner00.jpg) no-repeat center left;
z-index: -1;
}
.text-on-banner {
font-weight: 1000;
width: 95%;
max-width: 95%;
background-color:white;
opacity:0.6;
border-radius: 10px;
z-index: -1;
}
.text-highlight {
color: #e82d00;
font-weight: 800;
}

Answer 1

After spending 2-3 hours on this, I just realize that it was the .with-indicator ul which had to have z-index > 0. All working as expected now.
Hope this helps somebody else though. Thanks for looking.