在悬停元素时，显示另一个元素

Question

.LinkBar {
  cursor: pointer;
  width: 140px;
  height: 37px;
  border: 1px solid #c02c3a;
  margin-top: 50px;
  margin-left: 300px;
  background-color: #c02c3a;
  text-align: center;
  padding-top: 9px;
  color: white;
}

div.SampleMenu ul {
  list-style-type: none;
  width: 140px;
  background-color: Grey;
  margin-left: 300.5px;
  padding: 0;
  margin-top: 2px;
}

div.SampleMenu ul li {
  color: White;
  padding: 0;
  display: none;
}

div.SampleMenu ul li a {
  color: white;
  display: block;
  padding: 10px;
  font-size: large;
  text-align: center;
}

#HeaderBar:hover+.SampleMenu ul li {
  display: block;
}

<div class="CentralHeader">
  <div class="LinkBar" id="HeaderBar">All</div>
  <div class="SampleMenu">
    <ul>
      <li><a href="#Movies">Movies</a></li>
      <li><a href="#Events">Events</a></li>
      <li><a href="#Sports">Sports</a></li>
      <li><a href="#Plays">Plays</a></li>
    </ul>
  </div>
</div>

在上面的部分中，我试图在元素的同时操纵用户下拉 徘徊，但随着光标移动，下拉消失 落下。我想在下拉列表中选择一个需要下拉的项目 甚至在从指定元素移动光标时出现。我如何实现 此？

Answer 1

因为您已将display:block代码应用于#HeaderBar悬停，当光标进入下拉列表时，悬停代码无法运行。

因此，display:block也应用.SampleMenu ul:hover

#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
  display: block;
}

并将display:none应用于.SampleMenu ul而不是每个li元素。

Stack Snippet

.LinkBar {
  cursor: pointer;
  width: 140px;
  height: 37px;
  border: 1px solid #c02c3a;
  margin-top: 50px;
  margin-left: 300px;
  background-color: #c02c3a;
  text-align: center;
  padding-top: 9px;
  color: white;
}

div.SampleMenu ul {
  list-style-type: none;
  width: 140px;
  background-color: Grey;
  margin-left: 300.5px;
  padding: 0;
  margin-top: 0px;
  display: none;
  border-top: 2px solid #fff;
}

div.SampleMenu ul li {
  color: White;
  padding: 0;
}

div.SampleMenu ul li a {
  color: white;
  display: block;
  padding: 10px;
  font-size: large;
  text-align: center;
}

#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
  display: block;
}

<div class="CentralHeader">
  <div class="LinkBar" id="HeaderBar">All</div>
  <div class="SampleMenu">
    <ul>
      <li><a href="#Movies">Movies</a></li>
      <li><a href="#Events">Events</a></li>
      <li><a href="#Sports">Sports</a></li>
      <li><a href="#Plays">Plays</a></li>
    </ul>
  </div>
</div>