Boa noite. Bom Dia.
Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
//import DropModMn from '../../Helper/DropModMn';
import { ReactComponent as Respponse } from '../../icons/respponse.svg';
import styles from '../css/search.module.css';
import SubMenuCtg from './SubMneu/SubMenuCtg';
const Search = () => {
const menu = [
{
nctg: 'Masculino',
ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],
},
{
nctg: 'Femenino',
ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],
},
{
nctg: 'Criança',
ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],
},
{
nctg: 'Acessórios',
ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],
},
{
nctg: 'Promoção',
ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],
}
];
const [expand, setExpand] = useState(false);
function MouseOver(event){
event.preventDefault();
console.log(event);
if(expand) setExpand(!expand);
else setExpand(!expand);
}
return (
<nav className={styles.search}>
<div className={styles.ct}>
<Link to="/" className={styles.index}>
<Respponse aria-label="Respponse"/>
</Link>
</div>
<div className={styles.ct}>
<ul className={styles.ldep}>
{menu.map((m) =>
<li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>
<Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>
<SubMenuCtg gl={m.ctg} exp={expand} />
</li>
)}
</ul>
</div>
</nav>
)
}
export default Search