jquery - Mega Menu not working properly over the image carousel slider

Question

I have created a mega menu which is working fine, but when I use it before my carousel, then I found an unexpected output. The mega menu is opening below the carousel.

Here is my carousel code : carousel.component.html

<div class="container mt-5">
<mdb-carousel [animation]="'slide'">
  <mdb-carousel-item>
    <img class="d-block w-100 h-20" src="./assets/Images/2(a).PNG" alt="First slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100 " src="./assets/Images/2(b).PNG" alt="Second slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
  </mdb-carousel-item>
</mdb-carousel>
</div>

<router-outlet></router-outlet>

Here is my megamenu code : home.component.html

<style>
    body{
      margin: 0;
      padding: 0;
      font: 300 14px/18px Roboto;
      background-image: url('../images/texture.png');
   }
    
  
   *,
  :after,
  :before {
    box-sizing: border-box
  }
  
  .clearfix:after,
  .clearfix:before {
    content: '';
    display: table
  }
  
  .clearfix:after {
    clear: both;
    display: block
  }
  ul{
      list-style:none;
      margin: 0;
      padding: 0;
  }
  a, a:hover, a.active, a:active, a:visited, a:focus{
      color:#fefefe;
      text-decoration:none;
  }
  .content{
      padding:0px;
  }
  
  .exo-menu{
      width: 100%;
      float: left;
      list-style: none;
      position:relative;
      background: #2d2d2d;
  }
  .exo-menu > li {  display: inline-block;}
  .exo-menu > li > a{
      color: #ccc;
      text-decoration: none;
      text-transform: uppercase;
      border-right: 1px #365670 dotted;
      -webkit-transition: color 0.2s linear, background 0.2s linear;
      -moz-transition: color 0.2s linear, background 0.2s linear;
      -o-transition: color 0.2s linear, background 0.2s linear;
      transition: color 0.2s linear, background 0.2s linear;
  }
  .exo-menu > li > a.active,
  .exo-menu > li > a:hover,
  li.drop-down ul > li > a:hover{
      background:#009FE1;
      color:#fff;
  }
  .exo-menu i {
    float: left;
    font-size: 18px;
    margin-right: 6px;
    line-height: 20px !important;
  }
  li.drop-down,
  .flyout-right,
  .flyout-left{position:relative;}
  li.drop-down:before {
    content: "f103";
    color: #ffffff;
    font-family: FontAwesome;
    font-style: normal;
    display: inline;
    position: absolute;
    right: 6px;
    top: 20px;
    font-size: 14px;
  }
  li.drop-down>ul{
      left: 0px;
      min-width: 230px;
  
  }
  .drop-down-ul{display:none;}
  .flyout-right>ul,
  .flyout-left>ul{
    top: 0;
    min-width: 230px;
    display: none;
    border-left: 1px solid #365670;
    }
  
  li.drop-down>ul>li>a,
  .flyout-right ul>li>a ,
  .flyout-left ul>li>a {
      color: #fff;
      display: block;
      padding: 20px 22px;
      text-decoration: none;
      background-color: #2d2d2d;
      border-bottom: 1px dotted#2d2d2d;
      -webkit-transition: color 0.2s linear, background 0.2s linear;
      -moz-transition: color 0.2s linear, background 0.2s linear;
      -o-transition: color 0.2s linear, background 0.2s linear;
      transition: color 0.2s linear, background 0.2s linear;
  }
  .flyout-right ul>li>a ,
  .flyout-left ul>li>a {
      border-bottom: 1px dotted #B8C7BC;
  }
  
  
  /*Flyout Mega*/
  .flyout-mega-wrap {
      top: 0;
      right: 0;
      left: 100%;
      width: 100%;
      display:none;
      height: 100%;
      padding: 15px;
      min-width: 742px;
  
  }
  h4.row.mega-title {
    color:#eee;
    margin-top: 0px;
    font-size: 14px;
    padding-left: 15px;
    padding-bottom: 13px;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
   }
  .flyout-mega ul > li > a {
    font-size: 90%;
    line-height: 25px;
    color: #fff;
    font-family: inherit;
  }
  .flyout-mega ul > li > a:hover,
  .flyout-mega ul > li > a:active,
  .flyout-mega ul > li > a:focus{
    text-decoration: none;
    background-color: transparent !important;
    color: #ccc !important
  }
  /*mega menu*/
  
  .mega-menu {
    left: 0;
    right: 0;
    padding: 10px;
    display:none;
    padding-top: 0;
    min-height: 100%;
  
  }
  h4.row.mega-title {
    color: #eee;
    margin-top: 0px;
    font-size: 14px;
    padding-left: 15px;
    padding-bottom: 13px;
    text-transform: uppercase;
    border-bottom: 1px solid #2d2d2d;
    padding-top: 15px;
    background-color: #2d2d2d;
    }
   .mega-menu ul li a {
    line-height: 25px;
    font-size: 90%;
    display: block;
  }
  ul.stander li a {
      padding: 3px 0px;
  }
  
  ul.description li {
      padding-bottom: 12px;
      line-height: 8px;
  }
  
  ul.description li span {
      color: #ccc;
      font-size: 85%;
  }
  a.view-more{
    border-radius: 1px;
    margin-top:15px;
    background-color: #2d2d2d;
    padding: 2px 10px !important;
    line-height: 21px !important;
    display: inline-block !important;
  }
  a.view-more:hover{
      color:#fff;
      background:#2d2d2d;
  }
  ul.icon-des li a i {
      color: #fff;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      text-align: center;
      background-color: #2d2d2d;
      line-height: 35px !important;
  }
  
  ul.icon-des li {
      width: 100%;
      display: table;
      margin-bottom: 11px;
  }
  /*Blog DropDown*/
  .Blog{
      left:0;
      display:none;
      color:#fefefe;
      padding-top:15px;
      background:#2d2d2d;
      padding-bottom:15px;
  }
  .Blog .blog-title{
      color:#fff;
      font-size:15px;
      text-transform:uppercase;
  
  }
  .Blog .blog-des{
      color:#ccc;
      font-size:90%;
      margin-top:15px;
  }
  .Blog a.view-more{
      margin-top:0px;
  }
  /*Images*/
  .Images{
      left:0;
     width:100%;
       display:none;
      color:#fefefe;
      padding-top:15px;
      background:#2d2d2d;
      padding-bottom:15px;
  }
  .Images h4 {
    font-size: 15px;
    margin-top: 0px;
    text-transform: uppercase;
  }
  /*common*/
  .flyout-right ul>li>a ,
  .flyout-left ul>li>a,
  .flyout-mega-wrap,
  .mega-menu{
      background-color: #2d2d2d;
  }
  
  /*hover*/
  .Blog:hover,
  .Images:hover,
  .mega-menu:hover,
  .drop-down-ul:hover,
  li.flyout-left>ul:hover,
  li.flyout-right>ul:hover,
  .flyout-mega-wrap:hover,
  li.flyout-left a:hover +ul,
  li.flyout-right a:hover +ul,
  .blog-drop-down >a:hover+.Blog,
  li.drop-down>a:hover +.drop-down-ul,
  .images-drop-down>a:hover +.Images,
  .mega-drop-down a:hover+.mega-menu,
  li.flyout-mega>a:hover +.flyout-mega-wrap{
      display:block;
  }
  /*responsive*/
   @media (min-width:767px){
      .exo-menu > li > a{
      display:block;
      padding: 20px 22px;
   }
  .mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
  .flyout-left>ul, li.drop-down>ul{
          position:absolute;
  }
   .flyout-right>ul{
      left: 100%;
      }
      .flyout-left>ul{
      right: 100%;
  }
   }
  @media (max-width:767px){
  
      .exo-menu {
          min-height: 58px;
          background-color: #2d2d2d;
          width: 100%;
      }
      
      .exo-menu > li > a{
          width:100% ;
          display:none ;
      
      }
      .exo-menu > li{
          width:100%;
      }
      .display.exo-menu > li > a{
        display:block ;
            padding: 20px 22px;
      }
      
  .mega-menu, .Images, .Blog,.flyout-right>ul,
  .flyout-left>ul, li.drop-down>ul{
          position:relative;
  }
  
  }
  a.toggle-menu{
      position: absolute;
      right: 0px;
      padding: 20px;
      font-size: 27px;
      background-color: #ccc;
      color: #2d2d2d;
      top: 0px;
  }
  </style>

  <div class="container" style="height: 160px;">
    <p style="float:right" class="text-danger mt-4"><a> FREE SHIPPING IN NORTH AMERICA ON ORDERS $150+</a></p><br/>
  <h1 style="color: #000000;max-width: 100%; height: auto;vertical-align: middle;font-size: 2.307692308em;font-weight: 400;
  line-height: 1.25em;font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif"><b class="display-1"><u>BIKO</u></b></h1>
  
  </div>
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
       <div class="content" style="display: block;">
          <ul class="exo-menu">
            <li class="mega-drop-down"><a href="#"><u>LookBook</u></a>
                <div class="animated fadeIn mega-menu">
                    <div class="mega-menu-wrap">
                        <div class="row">
                        <div class="col-md-4">
                            <h4 class="row mega-title">Feature</h4>
                                <img class="img-responsive" src="https://3.bp.blogspot.com/-rUk36pd-LbM/VcLb48X4f-I/AAAAAAAAGCI/Y_UxBAgEqwA/s1600/Magento_themes.jpg">
                            </div>
                            <div class="col-md-2">
                                    <h4 class="row mega-title">Standers</h4>
                                <ul class="stander">
                                    <li><a href="#">Mobile</a></li>
                                    <li><a href="#">Computer</a></li>
                                    <li><a href="#">Watch</a></li>
                                    <li><a href="#">laptop</a></li>
                                    <li><a href="#">Camera</a></li>
                                    <li><a href="#">I pad</a></li>
                                    <li><a class="view-more btn- btn-sm" href="#">View more</a></li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <h4 class="row mega-title">Description</h4>
                                <ul class="description">
                                    <li><a href="#">Women</a>
                                        <span>Description of Women</span>
                                    </li>
                                    <li><a href="#">Men</a>
                                            <span>Description of men Cloths</span>
                        

Answer 1

Just add z-index:100000 !important; inside .exo-menu like given below:-

.exo-menu{
z-index:100000 !important;
}