Question

我正在构建一个将鼠标悬停在标题上时出现的下拉菜单。虽然我遵循了关于w3schools的一些指导，但我的代码不起作用，我不知道为什么以及如何解决它。所有答案都表示赞赏。这是我的代码：

＆＃13;

.dropdown {
  display: block;
  position: relative;
}
.dropdown-content {
  display: none;
  width: 100%;
  position: absolute;
}
.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="menu">
    <h2 class="dropdown">Menu</h2>
    <div class="dropdown-content">
      <ul>
        <li>
          <a href="#">Content</a>
        </li>
        <li>
          <a href="#">Content</a>
        </li>
        <li>
          <a href="#">Content</a>
        </li>
        <li>
          <a href="#">Content</a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

您需要在包装器上编写悬停样式，即<div class="menu">...</div>，因为元素<div class="dropdown-content">...</div>是它的后代。

同时将display: inline-block;提供给用于打开下拉菜单的元素，这里<h2 class="dropdown">Menu</h2>这样做会在光标结束时保持下拉菜单打开，允许用户选择一个选项。

检查以下代码段。

＆＃13;

.dropdown {
  display: inline-block;
  position: relative;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
}
.menu:hover .dropdown-content {
  display: block;
}

＆＃13;

<div class="menu">
  <h2 class="dropdown">Menu</h2>
  <div class="dropdown-content">
    <ul>
      <li>
        <a href="#">Content</a>
      </li>
      <li>
        <a href="#">Content</a>
      </li>
      <li>
        <a href="#">Content</a>
      </li>
      <li>
        <a href="#">Content</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

那是一个偷偷摸摸的虫子

.dropdown:hover+.dropdown-content {
    display: block;
}

.dropdown和.dropdown-content

他们是兄弟姐妹而不是父母

你的html缩进是欺骗

Answer 3

试试这个codepen ...

实际上你所犯的错误就是你必须在悬停时显示你的标题的兄弟是.dropdown:hover .dropdown-content {display: block;}将样式应用于兄弟姐妹我们必须使用+像tthis {{1 }}

希望你明白。

使用CSS

3 个答案: