My drop down menu is going behind the background image used as the banner - drop-down-menu

Question

I am using HTML5 and CSS3 to make my website.
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image used as a banner. I have tried everything possible and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the Nav Bar HTML Code:
<p>Abelia </p>
<ul>
<li>Home</li>
<li><a href="#">Services<i class="
fas fs-caret-down"></i></a>
<ul>
<li>Electricity</li>
<li>Water</li>
<li>Housing</li>
</ul>
</li>
<li>About Us
<ul>
<li>Vison</li>
<li>Projects</li>
<li>Team</li>
</ul>
</li>
<li><a>Contact Us</a></li>
</ul>
<div class="banner-area">
<h2>Welcome To Abelia Group</h2>
</div>
This is nav bar CSS code
.menu_bar{
background-color: #c0392b;
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;
position: fixed;
}
.logo a{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: beige;
letter-spacing: 4px;
}
.menu_bar ul{
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.menu_bar ul li{
padding: 5px 15px;
position: relative;
}
.menu_bar ul li a{
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
letter-spacing: 2px;
font-size: 20px;
color: beige;
transition:all 0.2s ;
}
.menu_bar ul li a:hover{
color: black;
}
.fs-caret-down{
height: 2px;
width: 1px;
color: rgb(255, 255, 255);
}
.dropdown_menu{
display: none;
}
.menu_bar ul li:hover .dropdown_menu{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu ul li{
width: 150px;
padding: 10px;
}
.dropdown_menu2{
display: none;
}
.menu_bar ul li:hover .dropdown_menu2{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu2 ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu2 ul li{
width: 150px;
padding: 10px;
}
/*content*/
.banner-area{
background-image: url(image/mypic.jpg);
background-size: cover;
background-position: center;
top: 80px;
height: 680px;
width: 100%;
position: fixed;
}
.banner-area:after{
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 800px;
background: rgb(21, 21, 29);
opacity:.7 ;
z-index: -1;
}