This is my component Item component

const Item = ({ href, children, childs }) => {
  return (
    <li className="group relative">
      <Link href={href} passHref>
        <a className="relative flex items-center gap-x-[9px] text-[15px] font-medium text-olive transition-all group-hover:text-coral">
          <span>{children}</span>
        </a>
      </Link>

      {childs > 0 && (
        <ul className="absolute top-full left-0 mt-6 hidden min-w-[258px] bg-olive group-hover:block">
          {childs.map(({ title, href }, index) => (
            <li key={index}>
              <Link href={href} passHref>
                <a className="block px-[21px] py-[13px] text-[15px] font-medium text-darkGray hover:bg-[#F4F7D9]">
                  {title}
                </a>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </li>
  );
};

This is the result: As you see I don't know how to fix the dropdown hovered issue.

CodePudding user response：

The problem is that the text of the submenu is further to the right? Give the top menu option the same px as the items in the dropdown list.

CodePudding user response：

  return (
    <li className="group relative">
      <Link href={href} passHref>
        <a className="relative flex items-center gap-x-[9px] text-[15px] font-medium text-olive transition-all group-hover:text-coral">
          <span>{children}</span>

          {childs && childs.length > 0 && (
            <span className="transition-transform group-hover:rotate-45">
              <ArrowDownRightIcon />
            </span>
          )}
        </a>
      </Link>

      {childs && childs.length > 0 && (
        <ul className="absolute top-full left-0 mt-6 hidden min-w-[258px] bg-olive after:absolute after:-top-6 after:h-6 after:w-full after:content-[''] group-hover:block">
          {childs.map(({ title, href }, index) => (
            <li key={index}>
              <Link href={href} passHref>
                <a className="block px-[21px] py-[13px] text-[15px] font-medium text-darkGray hover:bg-[#F4F7D9]">
                  {title}
                </a>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </li>
  );
};

Solved