Question

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

我要做的是让.submenu出现在使用<li>嵌套的#nav li a:hover submenu {下方。据我所知，这个CSS选择器应该在.submenu元素悬停时选择a 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。

纯CSS下拉菜单

4 个答案: