CSS悬停不渲染

Question

我是 CSS 新手，我正在尝试创建一个非常基本的导航栏。

我的 HTML 和 CSS 如下所示。

问题是，当我将鼠标悬停在 FEATURES 选项卡上时，即使我已将 feature-menu 显示更改为悬停时从无显示，也没有任何反应。

我无法在我的代码中找到任何错误。谁能告诉我哪里出错了？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown span:hover .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  left: 990px;
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}

<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span></li>
    <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
    </ul>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>

Answer 1

让我们回顾一下您的 HTML 结构。

以下是相关部分：

<ul type="none" class='menu'>
   <li class='dropdown'><span>Features ▾</span></li>
   <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
   </ul>
   <li><a href='#'>Blog</a></li>
    .
    .
    .

这是您正在应用的 CSS 选择器：

.dropdown span:hover .features-menu

所以问题很清楚了。

您将从一个级别 (.dropdown) 下降一个级别（到 span），然后返回一个级别（到 .features-menu）。

您正试图从位于 HTML 结构中较低位置的元素中定位 .features-menu。 CSS 不能那样工作。

CSS 只能向下或向前定位。它不能向上或向后瞄准。

这些概念在这些帖子中有详细解释：

• Is there a CSS parent selector?
• Is there a "previous sibling" CSS selector?

您可以通过定位“前进”（使用您的原始 - 格式错误 - HTML），使用同级组合符（+ 或 ~）来使您的悬停工作。

.dropdown:hover + .features-menu

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown:hover + .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  /* left: 990px; */
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}

<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
    <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
    </ul>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>

或者，您可以通过定位“向下”（使用正确格式的 HTML）、使用后代选择器（> 或 [space]）来使悬停行为起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown:hover > .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  /* left: 990px; */
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}

<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span>
      <ul class='features-menu'>
        <li><a href='#'>Harder</a></li>
        <li><a href='#'>Better</a></li>
        <li><a href='#'>Faster</a></li>
        <li><a href='#'>Stronger</a></li>
      </ul>
    </li><!-- closing tag goes here -->
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>