下拉列表不起作用 html css

Question

我有问题，无法解决。我创建了这个 HTML 页面，但是 #drop 上的 :hover 选择器不起作用。

#drop {
    display: inline-block;
    color: white;
    background-color: #4CAF50;
    padding: 10px;
}
#droplist {
    display: none;
    position: absolute;
    z-index: 1;
}
#droplist a {
    display: block;
    text-decoration: none;
    color: white;
    background-color: olivedrab;
    padding: 10px;
}
#drop:hover #droplist {
    display: block;
}
#droplist a:hover {
    background-color: olive;
}

<!DOCTYPE html>
<html lang="it">
<!--   ...   -->
<body>
    <div id="pagina">
        <div id="drop">Hover for open the menu</div>
        <div id="droplist">
            <a href="#a">Link 1</a>
            <a href="#b">Link 2</a>
            <a href="#c">Link 3</a>
        </div>
        <br/>text text text text text text text text text
    </div>
</body>
</html>

我尝试将鼠标悬停在 ID 为 #drop 的 div 上，但未显示元素 #droplist。

Answer 1

你不能 select #drop:hover #droplist 因为 #droplist 不是 #drop 的 child。

改用#drop:hover + #droplist。

element1 + element2 select 或用于 select 和紧跟在 element1

之后的每个 element2 的样式

#drop {
  display: inline-block;
  color: white;
  background-color: #4CAF50;
  padding: 10px;
}

#droplist {
  display: none;
  position: absolute;
  z-index: 1;
}

#droplist a {
  display: block;
  text-decoration: none;
  color: white;
  background-color: olivedrab;
  padding: 10px;
}

#drop:hover+#droplist {
  display: block;
}

#droplist a:hover {
  background-color: olive;
}

#droplist:hover {
  display: block
}

<!DOCTYPE html>
<html lang="it">
<!--   ...   -->

<body>
  <div id="pagina">
    <div id="drop">Hover for open the menu</div>
    <div id="droplist">
      <a href="#a">Link 1</a>
      <a href="#b">Link 2</a>
      <a href="#c">Link 3</a>
    </div>
  </div>
</body>

</html>

编辑：您可能想添加

#droplist:hover {
   display: block
}

这样当您将鼠标悬停在下拉菜单上时，它就不会消失

下拉列表不起作用 html css

drop down list does not work html css

css

hover

pseudo-class