纯 CSS 下拉菜单答案

【问题标题】：Pure CSS dropdown menu纯 CSS 下拉菜单
【发布时间】：2011-04-29 22:33:07
【问题描述】：

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

我要做的是使.submenu 出现在使用#nav li a:hover submenu { 嵌套的<li> 下方。据我所知，当 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>

【问题讨论】：

你的意思是#nav li a:hover .submenu？
你可以试试这个演示：themeswild.com/read/…

标签： html css drop-down-menu

【解决方案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;
}

【讨论】：

啊，是的，.submenu 是 li 的子菜单，而不是 a。
完美，当我将悬停添加到列表项时它可以工作。谢谢！ :)
@Josh - 如果点击绿色勾号有帮助，请不要忘记将其标记为答案 :-)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

您希望子菜单在您将鼠标悬停在 li 上时出现，而不是在 a 上，这仅仅是因为您在 a 中没有包含类子菜单的项目。

您也可以考虑将 s 用于子菜单。

【讨论】：