Question

* {
    margin: 0;
    padding: 0;
}
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #1A2456;
    padding: 1em;
    align-items: center;
    margin: 10px;
}
h2 {
    color: #FF8B68 ;
}
li {
    list-style: none;
}
li a, h2 a {
    text-decoration: none;
    color: #FF8B68;
}
.how {
    margin-left: 31em;
}
.dropdown ul {
    display: none;
  
}
.workflow:hover .dropdown ul { 
   display: unset;
}

<!DOCTYPE html>
<html lang="en">

<head>
<title>Document</title>
</head>

<body>
  <header>
    <div class="navbar">
      <h2> <a href="#">MONOGRAM</a> </h2>
      <li><a href="#" class="how">HOW IT WORKS</a></li>
      <li><a href="#" class="workflow">WORKFLOW</a>
        <div class="dropdown">
          <ul>
            <li>PHOTO EDITING</li>
            <li>VIDEO & FILMMAKING</li>
            <li>MUSIC & AUDIO</li>
            <li>VIRTUAL PRODUCTION</li>
          </ul>
        </div>
      </li>
      <li><a href="#">DOWNLOAD</a></li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#"><i class="gg-shopping-bag"></i></a></li>
    </div>
  </header>
</body>

</html>

当我将鼠标悬停在工作流链接上时，我想显示下拉菜单的内容，该下拉菜单的类名称为 .dropdown，但是当我将鼠标悬停在工作流链接上时，什么也没有发生。

>

我哪里做错了？是否使用了错误的选择器？如果是这样，我应该使用什么？

Answer 1

您的代码有几个问题需要更正。

首先，您用 ul 隐藏 .dropdown ul，但在任何情况下都不再显示。

并且您正在尝试选择 .dropdown 的 child .workflow，但它不是孩子，而是 兄弟姐妹。因此，您需要将下拉菜单移动到 .workflow 或将选择器更改为 .workflow:hover + .dropdown

但是，当您使用同级选择器时，您将失去在下拉菜单上移动的能力，因为当鼠标离开 .workflow 时，菜单会再次隐藏起来。

因此，我建议您将 .workflow 类从 a 标签移到 li 标签以覆盖孩子。

您可以在下面找到工作示例。请注意，li 具有 position: relative 属性，而 .dropdown 具有 position: absolute; top: 100%; 属性。

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #1a2456;
  padding: 1em;
  align-items: center;
  margin: 10px;
}

h2 {
  color: #ff8b68;
}

li {
  list-style: none;
  position: relative;
}

li a,
h2 a {
  text-decoration: none;
  color: #ff8b68;
}

.how {
  margin-left: 31em;
}

li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
}

.workflow:hover .dropdown {
  display: block;
  background: grey;
}

<header>
  <div class="navbar">
    <h2> <a href="#">MONOGRAM</a> </h2>

    <li><a href="#" class="how">HOW IT WORKS</a></li>
    <li class="workflow"><a href="#">WORKFLOW</a>
      <div class="dropdown">
        <ul>`enter code here`
          <li>PHOTO EDITING</li>
          <li>VIDEO & FILMMAKING</li>
          <li>MUSIC & AUDIO</li>
          <li>VIRTUAL PRODUCTION</li>
        </ul>
      </div>
    </li>
    <li><a href="#">DOWNLOAD</a></li>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">SHOP</a></li>
    <li><a href="#"><i class="gg-shopping-bag"></i></a></li>

  </div>
</header>

Answer 2

首先，您将 .dropdown ul 设置为 display: none，但您没有将其设置回 .workflow:hover .dropdown 中的默认值，因为它针对的是 .dropdown 类而不是ul 元素。

要么将 .dropdown ul 更改为仅 .dropdown，要么使悬停类似于 .workflow:hover .dropdown ul。

现在是主要问题，......

在使用 Inspect Element 时，我注意到 .dropdown 类不是 .workflow 的子类，而是相邻元素。

要解决这个问题，您应该使用 + 选择器，它选择相邻的兄弟元素或第一个元素之后的直接元素。

您的代码现在应该是这样的：

.dropdown ul {
    display: none;
}

.workflow:hover + .dropdown ul { 
    display: block;
}

此外，您可以在此处阅读更多 CSS 选择器：

Answer 3

在 li 元素中使用工作流类它将起作用。喜欢：

<li class="workflow"><a href="#">WORKFLOW</a>

* {
    margin: 0;
    padding: 0;
}
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #1A2456;
    padding: 1em;
    align-items: center;
    margin: 10px;
}
h2 {
    color: #FF8B68 ;
}
li {
    list-style: none;
}
li a, h2 a {
    text-decoration: none;
    color: #FF8B68;
}
.how {
    margin-left: 31em;
}
.dropdown ul {
    display: none;
  
}
.workflow:hover .dropdown ul { 
   display: unset;
}

<!DOCTYPE html>
<html lang="en">

<head>
<title>Document</title>
</head>

<body>
  <header>
    <div class="navbar">
      <h2> <a href="#">MONOGRAM</a> </h2>
      <li><a href="#" class="how">HOW IT WORKS</a></li>
      <li class="workflow"><a href="#">WORKFLOW</a>
        <div class="dropdown">
          <ul>
            <li>PHOTO EDITING</li>
            <li>VIDEO & FILMMAKING</li>
            <li>MUSIC & AUDIO</li>
            <li>VIRTUAL PRODUCTION</li>
          </ul>
        </div>
      </li>
      <li><a href="#">DOWNLOAD</a></li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#"><i class="gg-shopping-bag"></i></a></li>
    </div>
  </header>
</body>

</html>

：悬停不工作我错过了什么或做错了什么？

3 个答案: