谁能帮助谁，
我面临着一个问题，关于我的下拉菜单时，悬停在导航栏栏标签'工作'。将光标悬停在“工作”上后，您会注意到下面出现了一个下拉菜单。现在，一旦你开始向下移动光标点击下拉选项（社交媒体，照片，视频），菜单就会消失。

• Stackoverflow问题，如这些还没有解决我的问题，但可能是有帮助的？：
• Drop down menu disappears on hovering over first option (blogger)
• CSS Drop Down Menu disappearing *
  **我注意到的一点：**如果我从Navbar2.jsx的li元素中取出onMouseLeave={onMouseLeave}，它将在悬停后显示菜单。当你的鼠标离开菜单后，菜单会保持不变。
• 我在下面添加了图片和我的代码代码，以及我的repo。
• 注意：我在FCC论坛上被告知我的文件路径被破坏了。然而，最后我推，一切都是最新的和工作。所有图像都被正确命名，并且应该指向正确的导入。请让我知道详细如果有一个问题，但它应该工作或请参考下面的代码。

图片：x1c 0d1x
回购：https://github.com/DeBoer753/m-photography-PROJECT
React（NavBar 2）

// REACT:
import React, { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// COMPONENTS:
import DropDown from './DropDown'

// IMGS:
import cbmLogo from '../../imgs/CBMedia_Black.png'

// CSS:
import './NavBar2.css' 

// NAVBAR2:
export default function NavBar2() {
  const [click, setClick] = useState(false)
  const [dropdown, setDropdown] = useState(false)

  const handleClick = () => setClick(!click)
  const closeMobileMenu = () => setClick(false)

  const onMouseEnter = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else {
      setDropdown(true)
    }
  }

  const onMouseLeave = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else { 
      setDropdown(false)
    }
  }

  return (
    <>

      <nav className='navbar'>
        
        <div className='logo-name-box'>
          <Link to='/'><img src={cbmLogo} className='cbm-logo' alt="" srcset=""/></Link>
          <Link to='/' className='navbar-logo'>Blossom Media</Link>
        </div>
        <div className='menu-icon' onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
        </div>

        <ul className={click ? 'nav-menu active' : 'nav-menu'}>
          <li className='nav-item'><Link to='/services' className='nav-links' onClick={closeMobileMenu }>Services</Link></li>
          <li className='nav-item' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}><Link to='/work' className='nav-links' onClick={closeMobileMenu}>Work <i className='fas fa-caret-down'/></Link></li>
          {dropdown && <DropDown />}
          <li className='nav-item'><Link to='/reviews' className='nav-links' onClick={closeMobileMenu }>Reviews</Link></li>
          <li className='nav-item'><Link to='/about' className='nav-links' onClick={closeMobileMenu }>About</Link></li>
          <li className='nav-item'><Link to='/contact' className='nav-links' onClick={closeMobileMenu }>Contact</Link></li>
        </ul>

      </nav>

    </>
)
}

CSS（NavBar2）

.navbar {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 2px 20px rgb(54, 54, 54);
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  top: 0;
  position: sticky;
  z-index: 6;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.logo-name-box {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
  gap: 10px;
}

.cbm-logo {
  width: 50px;
}

.navbar-logo {
  color: #000000;
  justify-self: start;
  padding-bottom: 2px;
  font-weight:500;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.5rem;
  width: 280px;
  align-self: center;
}

.fa-firstdraft {
  margin-left: 0.5rem;
  font-size: 1.6rem;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
  list-style: none;
  text-align: center;
  width: 70vw;
  justify-content: end;
  margin-right: 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 80px;
}

.nav-links {
  color: rgb(0, 0, 0);
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.nav-links:hover {
  background-color: #1888ff;
  border-radius: 4px;
  transition: all 0.2s ease-out;
}

.fa-bars {
  color: #000000;
}

.nav-links-mobile {
  display: none;
}

.menu-icon {
  display: none;
}

@media screen and (max-width: 960px) {

  .navbar {
    justify-content: space-between;
  }

  .NavbarItems {
    position: relative;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: -180%;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .nav-menu.active {
    background: #242222;
    left: 0;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
    padding-left: 0px;
    border: 1px red solid;
  }

  .nav-links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
    border: 1px red solid;
  }

  .nav-links:hover {
    background-color: #1888ff;
    border-radius: 0;
  }

  .navbar-logo {
    display: none;
    position: absolute;
    top: 0;
    left: -75px;
    margin-left: 0;
    transform: translate(25%, 50%);
  }

  .menu-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
  }

  .fa-times {
    color: #040404;
    font-size: 2rem;
  }

  .nav-links-mobile {
    display: block;
    text-align: center;
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: 4px;
    width: 80%;
    background: #1888ff;
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
  }

  .nav-links-mobile:hover {
    background: #fff;
    color: #1888ff;
    transition: 250ms;
  }

}

REACT（下拉）

// REACT:
import React, { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// DATA:
import { MenuItems } from './MenuItems' // this deconstructs and finds the variable holding the data

// CSS:
import './DropDown.css' 

export default function DropDown() {
  const [click, setClick] = useState(false)

  const handleClick = () => setClick(!click)
  return (
    <>
    <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
      {MenuItems.map((item, index) => {
        return (
          <li key={index}><Link className={item.cName} to={item.path} onClick={() => setClick(false)}>{item.title}</Link></li>
        )
      })}
    </ul>
    </>
  )
}

CSS（下拉）

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  right: 260px;
  list-style: none;
  text-align: start;
}

.dropdown-menu li {
  background: #474747;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: rgba(242, 242, 242, 0.48);
}

.dropdown-menu.clicked {
  display: none;
}

.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  padding: 16px;
}