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）时，下拉功能有效罚款。要添加注释，当显示设置为div in div（class：SampleMenu）时，它工作正常（显示下拉列表）。为什么添加div标签会使Dropdown消失。什么似乎困扰着流程？

Answer 1

使用以下代码激活下拉列表：

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

注意adjacent sibling selector：+

来自MDN：

相邻的兄弟组合子（+）将两个选择器分开仅当第二个元素紧跟在第一个元素之后才匹配 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标签的下拉列表

1 个答案: