文本显示在弹出菜单顶部答案

【问题标题】：Text displays on top of popup menu文本显示在弹出菜单顶部
【发布时间】：2018-07-11 21:03:14
【问题描述】：

我用一个简单的下拉菜单（用 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>

【问题讨论】：

向我们展示您的尝试...
发布您的 HTML/CSS 代码
HTML：ibb.co/mkZ9u8 CSS：ibb.co/jGg5Z8
您可以将它们作为文本粘贴到您的帖子中吗？或者也许去创建一个codepen。
codepen.io/anon/pen/ajzXyN 在 codepen 上看起来不一样。这是你想要的吗？

标签： html css transparency

【解决方案1】：

对于子菜单，最好在 hover 上使用 visibility: hidden; 和 visibility: visible;，而不是在子菜单上使用 display: none 和 display: block，在子菜单上使用 position: absolute，在其父菜单条目上使用 position: relative。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：