纯CSS下拉菜单

Question

我正在尝试制作一个 100% CSS 和 HTML 下拉菜单，就像 http://phpbb.com 上看到的那样。当您将鼠标悬停在导航链接上时，一个新的 div 会出现在您悬停的那个 div 的正下方。

我想做的是使用 #nav li a:hover submenu { 使 .submenu 出现在它嵌套的

的正下方。据我所知，当 a 元素悬停在上面时，这个 CSS 选择器应该选择 .submenu DIV？但这不起作用。

#nav {
  list-style-type: none;
  margin: -5px 0px 0px 5px;
}
#nav li {
  display: inline;
}
#nav li a {
  display: block;
  padding: 3px;
  float: left;
  margin: 0px 10px 0px 10px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  position: relative;
}
#nav li a:hover {
  text-shadow: 1px 1px #333;
}
#nav li a:hover submenu {
  display: block;
  color: red;
}
.submenu {
  position: absolute;
  display: none;
}

<ul id="nav">
  <li><a href="/">Home</a>
  </li>
  <li>
    <a href="/">Skins</a>
    <div class="submenu">
      hello :)
    </div>
  </li>
  <li><a href="/">Guides</a>
  </li>
  <li><a href="/">About</a>
  </li>
</ul>

Answer 1

您的倒数第二个选择器正在寻找“子菜单”元素，您应该将其更正为“.submenu”，

如下所示：

/*#nav li a:hover submenu {*/
#nav li a:hover .submenu {
  display: block;
  color: red;
}

编辑：

要使悬停正常工作，您还需要调整CSS，以便将悬停应用于列表项，而不是锚标记：

#nav li:hover .submenu {
  display: block;
  color: red;
}

Answer 2

您是否在选择器 #nav li a:hover submenu 中的子菜单前缺少句点 ('.')？

Answer 3

尝试编辑以下部分。
放一个 . （点）在子菜单之前，因为它是一个类。

#nav li a:hover .submenu {
display: block;
color: red;
}

Answer 4

#nav li:hover .submenu {
    display: block;
    color: red;
}

您希望当您将鼠标悬停在 li 上而不是 a 上时显示子菜单，仅仅是因为 a 内没有带有类子菜单的项目。

您也可以考虑使用 s 作为子菜单。