Question

HTML：

<ul class="nav">
<ul>
  <li><a href="index.php">Home</a></li>
  <li><a href="#">A</a>
    <ul>
      <li><a href="x.php">X</a></li>
      <li><a href="y.php">Y</a></li>
      <li><a href="z.php">Z</a>
    </ul>
  </li>
</ul>
</ul>

CSS：

.nav ul ul {
    position:absolute;
    visibility: hidden;
    opacity:0;
    width:170px;
    margin:0;
    transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -webkit-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -moz-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}

.nav ul li:hover > ul {
    visibility: visible;
    opacity:1;
}

我希望将第一个级别淡入，将鼠标悬停在主菜单的列表项上，但它似乎无法正常工作。我花了好几个小时，我不确定什么是真的错。有什么指针吗？

如果您需要查看完整代码：http://paperbird.in/projects/BusinessConclave/index.php

Answer 1

编辑：好的，你贡献了你的网站，所以这是解决方案，实际上transition确实有效，但z-index导致你出现问题，所以它立刻轻弹子菜单..虽然它会转换，在 style.css 的 153 行上z-index: 100;使用.nav ul li:hover > ul，并确保删除visibility属性不需要。

首先，您的标记无效，您无法将ul作为ul的直接后代嵌套，因此将其嵌套在li中，其次，您无法转移visibility }属性，所以只使用opacity并删除visibility属性。如果需要，您还可以使用值animation-timing-function的{{1}}属性来获得一致的 fadein 和淡出效果效果。

Demo

linear

并确保在常规属性之前声明适当的属性。

为什么淡入不能使用这个CSS？

1 个答案: