In this code it supposed when the button Filter is hovered it will show a dropdown-menu with 2 buttons generation and type and when the generation is hovered it will show an other dropdown-menu
so to acheive that i used group it worked when i hover the button filter but it also shows directly the genartion dropdown eventough me i want to show the generation buttons only when the button generation is hovered
<div className='group relative'>
<div className='flex flex-row px-2 py-1 rounded gap-2 items-center hover:bg-black hover:opacity-20 hover:text-white cursor-pointer'>
<img src={images.filter_icon} className='w-6 h-6 object-cover group-hover:hidden' alt="" />
<img src={images.filter_hover_icon} className='w-6 h-6 object-cover group-hover:block hidden' />
<p>Filter</p>
</div>
{/* Filter dropdown */}
<div className='absolute -right-10 top-10 hidden dropdown-menu group-hover:block bg-gray-100 pl-6 pr-16 w-80 py-4 rounded'>
<p className='mb-6 text-2xl'>Add Filter</p>
{/* Generation */}
<div className='group- relative'>
<div className='bg-gray-200 w-full rounded hover:bg-slate-300 mb-4'>
<p className='p-3 cursor-pointer'>Generation</p>
{/* Generation dropdown*/}
<div className='absolute top-10 right-72 bg-gray-200 p-4 w-60 font-bold text-xl hidden group-hover:block'>
<p>Choose a generation</p>
<div className='flex flex-col gap-2 mt-6'>
<label className="flex flex-row gap-4 items-center">
<input type="checkbox" className="w-4 h-4 cursor-pointer" />
Generation 1
</label>
</div>
</div>
</div>
</div>
<div className=' bg-gray-200 rounded hover:bg-slate-300'>
<p className='p-3 cursor-pointer'>Type</p>
</div>
</div>
</div>
<div className='group flex flex-row px-2 py-1 rounded gap-2 items-center hover:bg-black hover:opacity-20 hover:text-white cursor-pointer'>
<img src={images.sort_icon} className='w-6 h-6 object-cover group-hover:hidden' alt="" />
<img src={images.sort_hover_icon} className='w-5 h-5 object-cover group-hover:block hidden' />
<p>Sort</p>
</div>
</div>
i tried using button click but i had problems like i want it to show just when its hovered
Parent div contain group when parent div is hover group-hover:
To use more group use group/name when it is hover group-hover/name:
see github discussion
example code
<div class="group/sidebar ...">
<!-- ... -->
<div class="group/navitem ...">
<a
href="#"
class="opacity-50 group-hover/sidebar:opacity-75 group-hover/navitem:bg-black/75"
>
<!-- ... -->
</a>
</div>
<!-- ... -->
</div>
Your updated code
<div className="group relative">
<div className="flex flex-row px-2 py-1 rounded gap-2 items-center hover:bg-black hover:opacity-20 hover:text-white cursor-pointer">
<img
src="https://cdn-icons-png.flaticon.com/512/17782/17782068.png"
className="w-6 h-6 object-cover group-hover:hidden"
alt=""
/>
<img
src="https://cdn-icons-png.flaticon.com/512/17782/17782068.png"
className="w-6 h-6 object-cover group-hover:block hidden"
/>
<p>Filter</p>
</div>
{/* Filter dropdown */}
<div className="absolute -right-10 top-10 hidden dropdown-menu group-hover:block bg-gray-100 pl-6 pr-16 w-80 py-4 rounded">
<p className="mb-6 text-2xl">Add Filter</p>
{/* Generation */}
<div className="group/generation relative">
<div className="bg-gray-200 w-full rounded hover:bg-slate-300 mb-4">
<p className="p-3 cursor-pointer">Generation</p>
{/* Generation dropdown*/}
<div className="absolute top-10 right-72 bg-gray-200 p-4 w-60 font-bold text-xl hidden group-hover/generation:block">
<p>Choose a generation</p>
<div className="flex flex-col gap-2 mt-6">
<label className="flex flex-row gap-4 items-center">
<input type="checkbox" className="w-4 h-4 cursor-pointer" />
Generation 1
</label>
</div>
</div>
</div>
</div>
<div className=" bg-gray-200 rounded hover:bg-slate-300">
<p className="p-3 cursor-pointer">Type</p>
</div>
</div>
</div>
<div className="group flex flex-row px-2 py-1 rounded gap-2 items-center hover:bg-black hover:opacity-20 hover:text-white cursor-pointer">
<img
src="https://cdn-icons-png.flaticon.com/512/17782/17782068.png"
className="w-6 h-6 object-cover group-hover:hidden"
alt=""
/>
<img
src="https://cdn-icons-png.flaticon.com/512/17782/17782068.png"
className="w-5 h-5 object-cover group-hover:block hidden"
/>
<p>Sort</p>
</div>