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

Question

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

.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

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

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