当我悬停在导航链接之外时，我的导航栏子菜单不会消失

Question

Context：我正在尝试创建一个带有子菜单的导航栏，该子菜单通过悬停出现和消失。

const about = document.querySelector('.about')
const services = document.querySelector('.services')
const abtDrpdwn = document.querySelector('ul.about-submenu')
const svcDrpdwn = document.querySelector('ul.svcs-submenu')

about.addEventListener('mouseenter', () => {
  abtDrpdwn.style.display = 'block'
})

abtDrpdwn.addEventListener('mouseleave', () => {
  abtDrpdwn.style.display = 'none'
})

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(198, 206, 206);
}

.logo img {
  width: 3.5rem;
}

nav ul {
  list-style: none;
}

nav ul a {
  text-decoration: none;
  color: black;
}

nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 15rem 0 15rem;
}

.nav-links ul {
  display: flex;
  justify-content: space-between;
  gap: 4em;
}

ul.about-submenu {
  position: absolute;
  display: none;
  padding: 15px 15px 0px 15px;
  margin-top: 10px;
  width: 100px;
  background-color: azure;
  border-radius: 10px;
}

ul.svcs-submenu {
  position: absolute;
  display: none;
  padding: 15px 15px 0px 15px;
  margin-top: 10px;
  width: 140px;
  background-color: aqua;
  border-radius: 10px;
}

ul.about-submenu li,
ul.svcs-submenu li {
  margin-bottom: 15px;
}

ul.about-submenu li a:hover,
ul.svcs-submenu li a:hover {
  color: brown;
}

<nav>
  <div class="logo">
    <img src='https://cdn.iconscout.com/icon/free/png-256/creative-68-225308.png'>
  </div>
  <div class="nav-links">
    <ul>
      <li><a href="#">Home</a></li>
      <li class='about'>
        <a href="#">About</a>
        <ul class='about-submenu'>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Our History</a></li>
          <li><a href="#">Our Vision</a></li>
        </ul>
      </li>
      <li class='services'>
        <a href="#">Services</a>
        <ul class='svcs-submenu'>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Action：我尝试使用

mouseenter

/

mouseover

使子菜单出现，并使用

mouseleave

使其消失。

结果：当我将鼠标悬停在导航链接上时，会出现子菜单。当我将鼠标悬停在子菜单外时，子菜单消失。但是，当您将鼠标悬停在导航链接外时，子菜单不会消失。

预期结果：当您将鼠标悬停在导航链接和子菜单之外时，子菜单消失。

Answer 1

只用CSS就可以达到想要的效果，不用Javascript。查看以下代码并结合样式表中更详细的格式设置规则（例如

padding

和

background-color

）：

.nav-links>ul>li { position: relative; display: inline-block; vertical-align: top; }
.nav-links>ul>li:not(:hover) ul { display: none; }
.about-submenu, .svcs-submenu { position: absolute; width: max-content; }

<nav>
  <div class="nav-links">
    <ul>
      <li><a href="#">Home</a></li>
      <li class='about'>
        <a href="#">About</a>
        <ul class='about-submenu'>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Our History</a></li>
          <li><a href="#">Our Vision</a></li>
        </ul>
      </li>
      <li class='services'>
        <a href="#">Services</a>
        <ul class='svcs-submenu'>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

但是不要使用像

about-submenu

这样只使用一次的类名，你应该给所有的子菜单一个通用的类，比如

<ul class='about submenu'>
...
<ul class='svcs submenu'>

也许还有顶级菜单。这将进一步简化 CSS。