文本显示在弹出菜单的顶部

Question

我制作了一个带有简单 drop-down 菜单的简单 HTML 页面（用 CSS 制作）。 drop-down 文本透明度有问题：它显示底部文本（如下图所示）。菜单中的文本是 link，因此包含在标签中。我尝试更改文本颜色和不透明度属性但没有解决问题。有什么想法吗？

.menu {
  margin-right: 0px;
  margin-left: -40px;
}

li {
  display: block;
  float: left;
  width: 25%;
  height: 50px;
  line-height: 50px;
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #000000;
}

.pat:hover {
  color: #EC008C;
}

.l {
  width: 100%;
  height: 50px;
  margin-left: -20px;
}

.sub-menu {
  visibility: hidden;
}

.menu .pat:hover .sub-menu {
  visibility: visible;
}

<ul class="menu">
  <li><a href="index.html">Home</a></li>
  <li class="pat">Patenti
    <ul class="sub-menu">
      <li class="l"><a href="patentea.html">Patente A</a></li>
      <li class="l"><a href="patenteb.html">Patente B</a></li>
      <li class="l"><a href="patsup.html">Patenti superiori</a></li>
    </ul>
  </li>
  <li>News</li>
  <li><a href="contatti.html">Contatti</a></li>
</ul>

Answer 1

只需将 position: relative 添加到 .menu。它将创建一个堆叠上下文，使其出现在正文上方。

这里是modified pen。我已经重写了所有规则，但只有最后一条很重要。

Answer 2

子菜单在hover上不要使用visibility: hidden;和visibility: visible;，最好使用display: none和display: block，并使用position: absolute在子菜单上，在其父菜单项上 position: relative。

display: none 不采用任何 space 的原因（并且 position: absolute 将阻止可见子菜单更改主菜单条目的设计），而 visibility: hidden; 为隐藏元素保留 space 并使其不可见，这使得它无法独立于可见时应覆盖的对象来正确定位它。

文本显示在弹出菜单的顶部

Text displays on top of popup menu

html

css

transparency