TailwindCSS : submenu disappears before I move the mouse over it

Hello,

I have this code with TailwindCSS.

@props([
    'title',
    'active',
])

<li
    x-data="{ show: false }"
    @mouseover="show=true"
    @mouseout="show=false"
    class="top-0 h-[56px] group"
>
    <div class="relative transition-all h-full flex justify-center rounded-b-lg whitespace-nowrap px-5 pt-[8px] pb-[12px] text-lg group-hover:h-[60px] group-hover:pt-[14px] cursor-pointer {{ $active ? 'bg-primary text-white' : 'text-secondary group-hover:bg-lightgray group-hover:text-black' }}">
        {{ $title }}
        <div class="absolute top-[72px]" x-transition x-show="show">
            <div class="relative flex justify-center">
                <div class="absolute h-4 w-4 rotate-45 bg-darkgray"></div>
                <ul class="absolute top-2 py-3 rounded-lg bg-darkgray text-white">
                    {{ $slot }} // list of li
                </ul>
            </div>
        </div>
    </div>
</li>

When I move the mouse over the submenu title, the submenu appears.

Then I move the mouse down to the submenu to select a submenu item. But the submenu disappears before I get the submenu items block. Yet the submenu is inside the li tag.

What I need is that a long as the mouse is inside the li tag, the submenu remains visible.

Why does my code not apply this behavior ?

I have added a border to see the limit of the li tag and it's bordered only around the text of the li, the submenu is outside the li border. Why ?

Thanks for your help.

AungHtetPaing__

3 years ago

Best Answer

Level 22

here is what I tried on the tailwind playground. https://play.tailwindcss.com/IZGT37dCVL

I guess that is happening because your submenu is disconnected with parent li. I removed relative from the red div so that absolute is overlapping with parent li and remains visible.

1 like

vincent15000

3 years ago

Level 63

@AungHtetPaing__ Ok thank you ... but in the design from the client, it's necessary that the submenu doesn't overlap the parent.

vincent15000

3 years ago

Level 63

Solved with this code.

@props([
    'title',
    'active',
])

<li
    x-data="{ show: false }"
    @mouseenter="show=true"
    @mouseleave="show=false"
    class="top-0 h-[56px] group"
>
    <div class="relative transition-all h-full flex justify-center rounded-b-lg whitespace-nowrap px-5 pt-[8px] pb-[12px] text-lg group-hover:h-[60px] group-hover:pt-[14px] cursor-pointer {{ $active ? 'bg-primary text-white' : 'text-secondary group-hover:bg-lightgray group-hover:text-black' }}">
        {{ $title }}
        <div x-if="true" class="absolute w-full top-[52px]">
            <div x-transition x-show="show" class="m-[20px]">
                <div class="relative flex justify-center">
                    <div class="absolute h-4 w-4 rotate-45 bg-darkgray"></div>
                    <ul class="absolute top-2 py-3 rounded-lg bg-darkgray text-white">
                        {{ $slot }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</li>

These two lines solve the problem.

        <div x-if="true" class="absolute w-full top-[52px]">
            <div x-transition x-show="show" class="m-[20px]">

The idea is to have a container which is directly in contact with the parent tag. And the submenu is inside this container.

Please or to participate in this conversation.