I have a mega menu with position absolute and after the mega menu, I have a relative container like this:

    <nav class="mega-menu relative">

        <div class="logo-wrapper">
            <img src="./logo.png" alt="">
        </div>

        <ul class="nav-items">
            <li><a data-menu="#mega-1" href=""> Men fashion </a></li>

        </ul>

        <div id="mega-1" class="mega-item absolute">
        </div>
    </nav>


    <div class="owl-slider owl-theme home-slider relative">

    </div>

When I hover on the mega menu it's getting behind the container.

I have tried many solutions from StackOverflow but it does not work for me.

see the image