Este es el elemento en la barra de navegación:

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

Tengo un estilo para ello, para manejar el desplazamiento:

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

y aquí está el <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>

El problema, hover no abre el menú. ¿Por qué? ¿Como arreglar?

El contenedor de menú normalmente es invisible:

 .menuContainer { display: none; position: absolute;