html - 悬停单个菜单项而不是整个菜单时出现下拉菜单

Question

我目前有一个 section 是一个 flex box。当我将鼠标悬停在 Vs div 上时，我试图让下拉菜单出现。不幸的是，这个 div 位于 section 标签内，下拉菜单不会出现。

当前设置代码的方式会导致当我将鼠标悬停在该部分的任何部分时出现下拉菜单。我希望下拉菜单仅在我将鼠标悬停在 Vs. div 上时出现。

这是该部分的图像。

.line {
  height: 4px;
  flex: 1;
  background: red;
  margin: 0 10px;
}
section {
  display: flex;
  align-items: center;
}
.home {
  margin-left: 50px;
}
.m {
  margin-right: 30px;
}
.logout {
  margin-right: 50px;
}
ul {
  list-style-type: none;
  margin-top: 20px;
}
.dropDown:hover ~ .dropDownContent {
  display: block;
}
.dropDownContent {
  display: none;
}

<section class="dropDown">
  <div class="home">Home</div>
  <div class="line"></div>
  <div class="m">Reports</div>
  <div class="m dropDownVs">Vs.</div>
  <div class="logout"> <a href="url"> Log Out </a> 
  </div>
</section>

<div class="dropDownContent">
  <ul>
    <li>name 1</li>
    <li>name 2</li>
    <li>name 3</li>
  </ul>
</div>

奖励:有关将下拉菜单直接对齐到 V 下方的任何建议。当鼠标离开 Vs 时，div 和选择下拉项的建议。 div 将不胜感激。目前，当我将鼠标移开该部分时，下拉菜单会消失，用户无法选择任何内容。

Answer 1

在您的代码中，您将下拉菜单定位为主菜单的同级菜单。最好将下拉菜单嵌套在相关的主菜单项中。试试这个:

.dropDownVs:hover .dropDownContent {
  display: block;
  position: absolute;
}

.dropDownContent {
  display: none;
}

.line {
  height: 4px;
  flex: 1;
  background: red;
  margin: 0 10px;
}

section {
  display: flex;
  align-items: center;
  position: relative;
}

.home {
  margin-left: 50px;
}

.m {
  margin-right: 30px;
}

.logout {
  margin-right: 50px;
}

ul {
  padding: 0;
  list-style-type: none;
}

<section class="dropDown">
  <div class="home">Home</div>
  <div class="line"></div>
  <div class="m">Reports</div>
  <div class="m dropDownVs">Vs.
    <ul class="dropDownContent">
      <li>name 1</li>
      <li>name 2</li>
      <li>name 3</li>
    </ul>
  </div>
  <div class="logout"> <a href="url"> Log Out </a>
  </div>
</section>