This is the element in the navbar:

<div className={styles.menu}>
  <button
    className={"a_4"}
    style={{
      color: "white",
      backgroundColor: "transparent",
      borderWidth: "0px",
      cursor: "pointer",
    }}
  >
    {userName}
  </button>
  <Menu />
</div>

I have a style for it, to handle hover:

.menu:hover .menuContainer {
  display: block;
}

and here is have the <Menu>

function Menu() {
  const dispatch = useAppDispatch();
  return (
    <div className={styles.menuContainer}>
      <ul>
        <li className={styles.menuItem}>
          <Link href={"/hu"}>
            <a className={"a_5"}>Profil</a>
          </Link>
        </li>

The problem, hover not open menu. Why? How to fix?

Menu container normally is invisible:

.menuContainer {
  display: none;
  position: absolute;