<ul> <li className='group'> <div className='flex items-center px-5 py-3 text-gray-600 text-lg hover:text-blue-700 hover:bg-slate-200 cursor-pointer' onClick={ () => setShowDropdown(showDropdown === "Submenu 1" ? undefined : "Submenu 1") } > <FiHome className='h-85 w-5 text-gray-500 mr-2' /> Inicio </div> { showDropdown === "Submenu 1" && ( <div /* className=' opacity-0 h-0 group-hover:opacity-100 group-hover:h-auto transition linear duration-500 delay-150' */ /* className= {`opacity-0 h-0 ${ showDropdown ? "group-hover:opacity-100 group-hover:h-auto transition linear duration-500 delay-150" : "" } ` // AQUI SIRVE BIEN PERO AL SALIR DEL BOTÖN SE OCULTA POR EL HOVER } */ /* className= {`opacity-0 h-0 ${ showDropdown ? "opacity-100 h-auto transition linear duration-500 delay-150" : "" } ` } */ > <ul className='bg-white'> <li className="py-3 px-6 hover:bg-slate-200">Test</li> <li className="py-3 px-6 hover:bg-slate-200">Test</li> </ul> </div> ) } </li> </ul>