Question

给出以下HTML代码：

.hormenu {
  text-decoration: none;
  color: black;
  padding: 0px 10px;
}

.hormenuParent {
  display: inline;
}

.hormenuParent:hover {
  background: #91c1f7;
}

.hormenuParent:hover ul {
  display: block;
}

<body style="height:100%;">
  <nav style="background-color:#f2f2f2; padding:4px 10px;">
    <div class="hormenuParent">
      <a href="#" class="hormenu">File</a>
      <ul style="display:none;">
        <li>Open</li>
        <li>Save</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Edit</a>
      <ul style="display:none;">
        <li>Copy</li>
        <li>Undo</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">View</a>
      <ul style="display:none;">
        <li>Zoom In</li>
        <li>Zoom Out</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Tools</a>
      <ul style="display:none;">
        <li>Do X</li>
        <li>Do Y</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Help</a>
      <ul style="display:none;">
        <li>About</li>
      </ul>
    </div>
  </nav>
</body>

我期望ul元素可见（如下拉菜单），但它们却不可见。为什么？

Answer 1

因为“内联CSS”在层叠中排在最后[strong] ，因此您的display:block被覆盖。

从HTML中删除style="display:none;"，并将其作为默认样式添加到ul CSS中。

.hormenu {
  text-decoration: none;
  color: black;
  padding: 0px 10px;
}

.hormenuParent {
  display: inline;
}

ul {
  display: none;
}

.hormenuParent:hover {
  background: #91c1f7;
}

.hormenuParent:hover ul {
  display: block;
}

<nav style="background-color:#f2f2f2; padding:4px 10px;">
  <div class="hormenuParent">
    <a href="#" class="hormenu">File</a>
    <ul>
      <li>Open</li>
      <li>Save</li>
    </ul>
  </div>
  <div class="hormenuParent">
    <a href="#" class="hormenu">Edit</a>
    <ul>
      <li>Copy</li>
      <li>Undo</li>
    </ul>
  </div>
  <div class="hormenuParent">
    <a href="#" class="hormenu">View</a>
    <ul>
      <li>Zoom In</li>
      <li>Zoom Out</li>
    </ul>
  </div>
  <div class="hormenuParent">
    <a href="#" class="hormenu">Tools</a>
    <ul>
      <li>Do X</li>
      <li>Do Y</li>
    </ul>
  </div>
  <div class="hormenuParent">
    <a href="#" class="hormenu">Help</a>
    <ul>
      <li>About</li>
    </ul>
  </div>
</nav>

Answer 2

这是因为您为display:none;使用了内联样式。这将覆盖您放入CSS中的所有内容。删除这些内容并将.hormenuParent ul {display: none;}添加到CSS后，这些列表就会在悬停时重新出现。现在，您只需使其漂亮即可！

以下是调整后的代码：

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>PTFS Dodument Editor</title>
  <style>
    .hormenu {
      text-decoration: none;
      color: black;
      padding: 0px 10px;
    }
    
    .hormenuParent {
      display: inline;
    }
    
    .hormenuParent ul {
      display: none;
    }
    
    .hormenuParent:hover {
      background: #91c1f7;
    }
    
    .hormenuParent:hover ul {
      display: block;
    }
  </style>
</head>

<body style="height:100%;">
  <nav style="background-color:#f2f2f2; padding:4px 10px;">
    <div class="hormenuParent">
      <a href="#" class="hormenu">File</a>
      <ul>
        <li>Open</li>
        <li>Save</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Edit</a>
      <ul>
        <li>Copy</li>
        <li>Undo</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">View</a>
      <ul>
        <li>Zoom In</li>
        <li>Zoom Out</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Tools</a>
      <ul>
        <li>Do X</li>
        <li>Do Y</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Help</a>
      <ul>
        <li>About</li>
      </ul>
    </div>
  </nav>
</body>

</html>

Answer 3

这是一个简单的CSS，可让您在鼠标悬停时显示菜单：

.hormenuParent {
  position:relative;
}
.hormenuParent:hover ul {
  display:block !important;
}

.hormenuParent ul {
  margin-top:0;
  left:0;
  width:200px;
  position: absolute;
  background:#f0f0f0;
}

您可以在这里进行测试：https://jsfiddle.net/7mLkdh5u/1/

在悬停时显示子元素

3 个答案: