下拉列表不起作用html css答案

【问题标题】：drop down list does not work html css下拉列表不起作用html css
【发布时间】：2018-01-13 12:35:06
【问题描述】：

我有一个问题，无法解决。我已经创建了这个 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 没有出现。

【问题讨论】：

标签： css hover pseudo-class

【解决方案1】：

您不能选择#drop:hover #droplist，因为#droplist 不是#drop 的子级。

请改用#drop:hover + #droplist。

element1 + element2 选择器用于选择紧跟在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
}

这样当您将鼠标悬停时下拉菜单不会消失

【讨论】：

没问题Matteo，看看我上面的编辑（在你的代码中添加#droplist:hover {display: block}）。还可以考虑为未来的用户投票并接受答案。谢谢！