在悬停单个菜单项时尝试下拉显示，而不是整个菜单

Question

我目前有section这是一个弹性框。当我将鼠标移到Vs div上时，我试图显示一个下拉菜单。不幸的是，这个div位于section标记内，下拉菜单不会出现。

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

这是该部分的图像。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

额外奖励：有关在Vs正下方对齐下拉的任何建议。 div和当鼠标离开Vs时选择下拉项目的建议。 div将不胜感激。目前，当我鼠标离开该部分时，下拉列表消失，用户无法选择任何内容。

Answer 1

在您的代码中，您将下拉菜单定位为主菜单的兄弟。最好将下拉列表嵌套在相关的主菜单项中。试试这个：

ul {
  display: flex;
  list-style-type: none;
  margin-top: 20px;
}
ul > li:hover {
  background-color: aqua;
  cursor: pointer;
}
.dropDownVs > ul {
  display: none;
}
.dropDownVs:hover > ul {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}
.home {
  margin-left: 50px;
}
.line {
  flex: 1;
}
.m {
  margin-right: 30px;
}
.logout {
  margin-right: 50px;
}

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

有关其他指导，请参阅我的菜单：

（注意：这只是我使用非flex布局构建的一个基本示例。想想它的某些方面可能对你有所帮助。）

#main-nav > ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #999;
  position: absolute;
  top: 0;
}
    
#main-nav > ul > li {
  float: left;
  background-color: #000;
}   

.main-nav-sub {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
    
#main-nav > ul > li+li {
  border-left: 1px solid #999;
}
    
.main-nav-sub > li {
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  border-left: 1px solid #999;
  background-color: #000;
}
    
.main-nav-sub > li:first-child {
  border-top: 1px solid #999;
}
    
#main-nav > ul > li > a,
 .main-nav-sub > li > a {
  text-decoration: none;
  white-space: nowrap;
  display: block;
  color: #fff;
  font-family: verdana, sans-serif;
  font-size: .8em;
  font-weight: bold;
  padding: 10px 20px;
}
    
#main-nav > ul > li:hover > a {
  color: #000;
  background-color: #fff;
}
    
.main-nav-sub > li:hover > a {
  color: #000;
  background-color: #fff;
}
    
.main-nav-sub {
  position: absolute;
  z-index: -999;
  opacity: 0;
  filter: alpha(opacity=0);    /* IE older versions */
        zoom: 1;               /* IE older versions */
    }
    
#main-nav > ul > li:hover > .main-nav-sub {
  z-index: 100;
  opacity: 1;
  filter: alpha(opacity=100);  /* IE older versions */
        zoom: 1;               /* IE older versions */
        -webkit-transition: all .5s ease-in;
        -moz-transition: all .5s ease-in;
        -ms-transition: all .5s ease-in;
        -o-transition: all .5s ease-in;
        transition: all .5s ease-in;
    }

<nav id="main-nav">
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
      <ul class="main-nav-sub">
        <li><a href="#">Menu 2.1</a></li>
        <li><a href="#">Menu 2.2</a></li>
        <li><a href="#">Menu 2.3</a></li>
        <li><a href="#">Menu 2.4</a></li>
        <li><a href="#">Menu 2.5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
      <ul class="main-nav-sub">
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a>
      <ul class="main-nav-sub">
        <li><a href="#">Menu 5.1</a></li>
        <li><a href="#">Menu 5.2</a></li>
        <li><a href="#">Menu 5.3</a></li>
        <li><a href="#">Menu 5.4</a></li>
      </ul>
    </li>
  </ul>
</nav>