html - 纯CSS下拉菜单

我正在尝试设计一个100%的CSS和HTML下拉菜单，就像在http://phpbb.com上看到的那样。当您将鼠标悬停在导航链接上时，新的div将显示在您悬停的div的正下方。
我要做的是使用.submenu使<li>出现在它嵌套的#nav li a:hover submenu {下面。据我所知，当.submenu元素悬停在上面时，这个CSS选择器应该选择aDIV？但没用。

#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>

最佳答案

您的第二个到最后一个选择器正在寻找“submenu”元素，您应该将其更正为“.submenu”
这样地：

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

编辑：
要使悬停生效，还需要调整CSS，以便将悬停应用于列表项，而不是定位标记：

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

关于html - 纯CSS下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5838053/

SubMenu

html - 纯CSS下拉菜单