在两个标签之间插入 div 标签时用作下拉列表的非功能性

Question

 <body>
   <div class = "CentralHeader">
      <div class = "LinkBar" id = "HeaderBar" >All</div>   
      <div class = "searchBar">Search</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>


<style type="text/css">
.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 {
   padding: 0;
  }

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

 #HeaderBar:hover+.SampleMenu ul,
 .SampleMenu ul:hover {
   display: block;
  }
 </style>
 </body>

删除 div 标签 (class:searchBar) 后，下拉功能有效 fine.To 添加注释，当 div (class:SampleMenu) 中的 ul 显示设置为自动时，它工作正常（显示下拉菜单）。为什么添加 div 标签会使下拉菜单消失。流量好像有什么问题？

Answer 1

使用此代码激活下拉菜单：

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

注意 adjacent sibling selector：+

来自 MDN：

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

当您添加 <div class = "searchBar">Search</div> 时，它会成为相邻的同级，并且 .SampleMenul ul 不再是目标。

如果您想保留标记，可以改用 general sibling combinator。

示例...

.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 {
  padding: 0;
}

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

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

<body>
  <div class="CentralHeader">
    <div class="LinkBar" id="HeaderBar">All</div>
    <div class="searchBar">Search</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>

在两个标签之间插入 div 标签时用作下拉列表的非功能性

Non-functionality of two tags working as dropdown on inserting a div tag between them

html

css

display