How to make the DropDown Menu Stay when I unhover the targeted element in Material-UI

Question

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;

When I hover over the Shop text, my drop down appears but as I move towards the drop down menu, it becomes invisible. How can I make the dropDown stay even when I unhover the Shop so that I can interact with the drop down elements. I just want the Drop Down menu to stay as I unhover over the Shop text and moves towards the it (Drop Down Menu).

Answer 1

 import React from 'react';
import { makeStyles, Typography, Grid } from '@material-ui/core';

const styles = makeStyles((theme) => ({
    root: {
        '& $dropDown': {
            visibility: 'hidden',
            transition: 'all 0s ease 0.2s',
            display: 'inline-flex',
        },

        '&:hover $dropDown': {
            transitionDelay: '0s',
            visibility: 'visible',
        },
    },
    textStyle: {
        fontFamily: 'brandon-grotesque-light',
        textTransform: 'uppercase',
        cursor: 'pointer',
        '&:hover': {
            color: theme.palette.primary.light,
        },
    },

    dropDown: {
        top: '80px',
        position: 'absolute',
        width: '100%',
        height: 'auto',
        left: '0',
        backgroundColor: theme.palette.primary.main,
        '& ul': {
            listStyleType: 'none',
            padding: '0px 0px',
            '& li': {
                padding: '5px 0px 5px 30px',
                '& a': {
                    display: 'block',
                },
            },
        },
    },

    rowsStyle: {
        paddingLeft: '80px !important',
        position: 'relative',
    },

    columnStyle: {
        fontFamily: 'brandon-grotesque-black',
    },
    linkStyle: {
        fontFamily: 'brandon-grotesque-light',
        cursor: 'pointer',
        '&:hover': {
            color: theme.palette.primary.light,
        },
    },
}));

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 (
        <Grid className={classes.root}>
            <Typography variant='body1' className={classes.textStyle}>
                Shop
            </Typography>

            <Grid className={classes.dropDown} container direction='row'>
                <ul>
                    <li>
                        <a>
                            <Typography
                                variant='body2'
                                className={classes.columnStyle}
                            >
                                Trending
                            </Typography>
                        </a>
                    </li>

                    {trendingArr.map((item, i) => (
                        <li>
                            <a>
                                <Typography
                                    className={classes.linkStyle}
                                    variant='body2'
                                    key={i}
                                >
                                    {item}
                                </Typography>
                            </a>
                        </li>
                    ))}
                </ul>
             
            </Grid>
        </Grid>
    );
};

export default Shop;

Instead of targeting the text, targeting the container fixed the dropdown problem.