Mi duda es tengo este componente react y lo que deseo es quie los submenus aparezcan en el mismo lugar es decir como tiene los submenu position: absolute cada vez que doy hover en un menu me aparece su respectivo submenu debajo de ese menu como aparece en la imagen, lo que quiero hacer es que aparezcan en el mismo lugar es decir si hago hover en wathches me aparece el submenu de wathces debajo de este pero quiero hacer hover en smartwatches y que comience a pintarse desde donde comienza watches como logro eso con css
<ul className='menu submenu'>
{
menuNiveltwo.data?
menuNiveltwo.data.map( e => {
if(e.category === comparacion){
return(
<li key={e._id} className="item">
<Link to={`/${e.name}`} className="link">
{e.name}
</Link>
{/* <ComponenteMenuNivel3
url2={url2}
comparacion={e._id}
url3={url3}
/> */}
</li>
)
}else{
return null
}
})
:
<div>
Cargando...
</div>
}
</ul>
Este es mi css del tanto del menu como del submenu el menu tiene los mismos estilos que los del menu principal no tiene la clase submenu y los items del menu principal no
.header{
width: 100%;
background: var(--color_white);
}
.nav{
display: flex;
justify-content: center;
}
.menu{
display: flex;
justify-content: center;
list-style: none;
width: 100%;
font-size: 0.9rem;
}
.submenu{
top: 100%;
width: 100%;
background-color: red;
background: var(--color_white);
display:none;
}
.item{
position: relative;
width: 10em;
}
.item:hover > .submenu{
display: flex;
background-color: yellow;
justify-content: space-around;
width: 190vh;
position: absolute;
left: -20em;
}
.submenu .item:hover > .submenu{
display: grid;
grid-template-columns: 1fr 1fr;
width: 20em;
}
.link{
display:inline-block;
padding: 0.5rem 0.75rem;
color: var(--color_negro);
text-decoration: none;
width:100%;
}
.link:hover{
color: red;
}
Este es el resultado como se va recorriendo los items de cada menu lo que quiero es que si hago hover tanto en watches como en gifts
llenen el espacio desde donde comienza watches hasta blog como lo logro con css
Lo que quiero es que no se recorra con css como la pagina real que es esta