Dropdown pass behind swiperjs, z-index issue or tailwindcss issue?

I’m trying to use SwiperJS but I have a problem with the z-index I think.

I have my menu going below the slider and I don’t understand how this is happening.

I tried to put a z-index: 1000 on the menu and a z-index: 1 on the slider.

I tried to put a z-index: -1 on the slider and it works, but I lose the use of the navigation buttons…

Am I blind? I think so.

<header class="menu">
    <div class="menu__logo">
        <a href="/">
            kappa
        </a>
    </div>
    <div class="menu__nav">
        <ul>
            <li>
                <a href="#">
                    kappa
                </a>
            </li>
            <li>
                <a href="#">
                    kappa
                </a>
            </li>
            <li class="menu__nav__dropdown" x-data="{open: false}" x-on:mouseover="open = true" x-on:mouseover.away="open = false">
                    <span>
                        kappa
                    </span>
                <x-icons.array-down />
                <div class="menu__nav__dropdown__block" x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" @click.away="open = false" style="display: none;">
                    <div class="menu__nav__dropdown__block__bg">
                        <div class="menu__nav__dropdown__link__wrapper">
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">
                    kappa
                </a>
            </li>
        </ul>
    </div>
    <div class="menu__phone">
        <div class="menu__phone-icon">
            <x-icons.phone />
        </div>
        <div class="menu__phone-number">
            <a href="#">kappa</a>
        </div>
    </div>
</header>

.menu {
    @apply flex w-full justify-between py-4 sticky base;
}

.menu__logo {
    @apply w-52;
}

.menu__nav ul {
    @apply list-none flex gap-x-10;
}

.menu__nav {
    @apply my-auto;
}

.menu__phone {
    @apply flex gap-x-3;
}

.menu__phone-icon {
    @apply bg-sc-orange p-2 fill-white;
}

.menu__phone-number {
    @apply my-auto font-bold;
}

.menu__nav__dropdown {
    @apply cursor-pointer fill-primary flex gap-x-3
}

.menu__nav__dropdown svg {
    @apply my-auto
}

.menu__nav__dropdown__block {
    @apply absolute left-1/2 transform -translate-x-1/2 mt-8 px-2 w-screen max-w-xs sm:px-0 z-10;
}

.menu__nav__dropdown__block__bg {
    @apply shadow-lg ring-1 ring-black ring-opacity-5 z-10;
}

.menu__nav__dropdown__link__wrapper {
    @apply relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8;
}

.menu__nav__dropdown__link {
    @apply -m-3 p-3 block hover:bg-gray-50;
}

<div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
            </div>
            <div class="swiper-slide">
                <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
            </div>
            <div class="swiper-slide">
                <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
            </div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

I would just like the menu to go in front of the slider.