import React from 'react';
import { makeStyles, Typography, Grid } from '@material-ui/core';
const styles = makeStyles((theme) => ({
root: {},
textStyle: {
fontFamily: 'brandon-grotesque-black',
textTransform: 'uppercase',
cursor: 'pointer',
'& + $dropDown': {
visibility: 'hidden',
transition: 'all 0s ease 1s',
},
'&:hover': {
'& + $dropDown': {
transitionDelay: '0s',
visibility: 'visible',
},
},
},
dropDown: {
width: 'max-content',
position: 'absolute',
top: '100px',
pointerEvents: 'none',
'& ul': {
listStyleType: 'none',
padding: '0px 0px',
'& li': {
backgroundColor: 'purple !important',
},
'&:hover': {},
// visibility: 'hidden',
},
},
}));
const Shop: React.FC = () => {
const classes = styles();
const trendingArr = [
'New Arrivals',
'Best Sellers',
'The Summer Edit',
'FRAME & Mejuri',
'New Arrivals',
'Best Sellers',
'The Summer Edit',
'FRAME & Mejuri',
];
return (
<>
<Typography variant='body1' className={classes.textStyle}>
Shop
</Typography>
<Grid className={classes.dropDown} container direction='row'>
<ul>
<li>
<a>
<Typography variant='body2'>
<b>Trending</b>
</Typography>
</a>
</li>
{trendingArr.map((item, i) => (
<li>
<a>
<Typography variant='body2' key={i}>
{item}
</Typography>
</a>
</li>
))}
</ul>
</Grid>
</>
);
};
export default Shop;
While hovering over the Shop text, the drop down menu appears. However, when moving towards the drop down menu, it becomes invisible. How can I ensure that the drop down remains visible even after unhovering from the Shop text, allowing interaction with the drop down elements? I aim to keep the drop down menu visible as I move away from the Shop text and towards the menu itself.