html - 纯 CSS 下拉菜单

Question

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

我想做的是制作 .submenu出现在 <li> 的正下方它是通过使用 #nav li a:hover submenu { 嵌套的.据我所知，这个 CSS 选择器应该选择 .submenu。 DIV 当 a元素悬停了吗？但它不起作用。

#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”元素，您应该将其更正为“.submenu”

像这样:

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

编辑:

要使悬停起作用，您还需要调整 CSS 以便将悬停应用于列表项，而不是 anchor 标记:

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