I want to display a div when user hover over a sign in element but div should be displayed when user moves the mouse to that div other in ReactJS

Question

I'm new to react and I'm building alibaba.com clone. I want to display a div when user hover over a div with the classname of create_account, I've tried onMouseEnter and onMouseLeave on that element but the div's closed when I move the mouse outside of the sign in element. How can I display that component when I move to that element

import React, { useState } from "react";
import classes from "./Header.module.css";
import SignInMenu from "../signin/SignInMenu";

const Header = () => {
  const [signMenu, setSignMenu] = useState(false);

  return (
    <header className={classes.header}>
      <div className={classes.container}>
        <div className={classes.header_options}>
          <div
            className={classes.create_account}
            onMouseEnter={() => setSignMenu(true)}
            onMouseLeave={() => setSignMenu(false)}
          >
            <p>
              <span>Sign In</span>
              <span>Join Free</span>
            </p>
            {signMenu ? <SignInMenu/> : <></>}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

this is for the main styles

.header {
  width: 100%;
  height: 120px;
}
.container {
  width: 100%;
  height: auto;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header_options {
  display: flex;
  align-items: center;
  justify-content: center;
}
.create_account {
  display: flex;
  align-items: center;
  position: relative;
}
.user_icon {
  font-size: 28px;
  margin-right: 5px;
}
.create_account > p > span {
  display: block;
  font-size: 12px;
}

this is the component I want to show

import React, { useState } from 'react';
import classes from './SignInMenu.module.css';
import { Link } from 'react-router-dom';

const SignInMenu = () => {
  return (
    <div className={classes.account_dropdown}>
      <div className={classes.top}>
        <p>Welcome back!</p>
        <Link className={classes.sign_in} to='/signin'>Sign In</Link>
        <Link className={classes.join_in} to='/join'>Join Free</Link>
      </div>
    </div>
  )
}

export default SignInMenu

this is the styles for the sign in menu div

.account_dropdown {
  width: 250px;
  height: 400px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  border-radius: 5px;
  font-size: 14px;
  position: absolute;
  top: 40px;
  right: 8%;
}
.account_dropdown::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  position: absolute;
  top: -7px;
  right: 8%;
  transform: rotate(45deg);
  z-index: -1;
}
.top {
  display: flex;
  flex-direction: column;
}
.sign_in {
  width: 100%;
  padding: 5px 0;
  margin: 10px 0;
  color: #fff;
  background-color: var(--orange-color);
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
}
.join_in {
  width: 100%;
  padding: 5px 0;
  color: var(--orange-color);
  border: 1px solid var(--orange-color);
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
}

Answer 1

You can use css to do it.

.create_account:hover .account_dropdown {
  display: block;
}

.account_dropdown {
  display: none;
  width: 250px;
  height: 400px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  border-radius: 5px;
  font-size: 14px;
  position: absolute;
  top: 40px;
  right: 8%;
}

and also remove onMouseEnter, onMouseLeave