So I have this Navbar that shows the dropdown menu whenever I hover over it

```
       <li>
        <Link
          to='/'
          className='nav-links'
          onClick={() => setClick(false)}
          onMouseEnter={() => setDropdown(true)}
          onMouseLeave={() => setDropdown(false)}
        >
          Home
        </Link>
        {dropdown && <Dropdown />}
      </li>

```

My issue is when I try to hover over the actual dropdown menu it disappears since the onMouseEnter is only set on the `<Link>` tag

Here is the Dropdown Component Code

```
      function Dropdown() {
        return (
          <>
            <ul className='dropdown-menu'>
              {MenuItems.map((item, index) => {
                return (
                  <li key={index}>
                    <a className={item.cName} href={item.url}>
                      {item.title}
                    </a>
                  </li>
                );
              })}
            </ul>
          </>
        );
      }

      export default Dropdown;

```

CSS that displays the Dropdown

```
      .dropdown-menu {
        background: red;
        width: 200px;
        position: absolute;
        top: 80px;
        list-style: none;
      }

      .dropdown-menu li {
        background: yellow;
        padding: 16px;
      }

```

How would I prevent the dropdown from disappearing whenever I hover over the `<Link>` tag?