html - 从图像中淡化下拉 CSS

Question

我已经按照一些教程进行了操作，并根据网站的 Logo 创建了一个下拉菜单。

这一切都按照我的目标完美运行。为了增加效果，我希望能够让菜单项平静地淡入而不是仅仅在那里。我已尝试按照教程进行操作，但我认为我已经对 CSS 列表进行了大量的处理，以至于很难将其放置到位。

我需要将 Logo 作为父链接，当鼠标悬停在父链接上时会下拉选项，并且它的形状、填充、边框等不受 li 类的影响，因此我创建了子类来防止这种情况发生。

这是有问题的 HTML。

<nav>
<ul>
    <li><a href="#"><div id="logo"><img src="images/logo.png" width="318" height="85"      alt="Logo of Website"/></div></a>

        <ul>
            <li class="sub"> <a href="#">Much</a>

            </li>
            <li class="sub"> <a href="#">Navigation</a>

            </li>
            <li class="sub"> <a href="#">Very</a>

            </li>
            <li class="sub"> <a href="#">Links</a>

            </li>
            <li class="sub"> <a href="#">Wow</a>

            </li>
        </ul>
    </li>
</ul>
</nav>

还有我乱七八糟的样式表

li {
    list-style:none !important;
}

.sub {
    padding:5px;
    width:300px;
    margin-bottom:1px;
    border:rgba(0, 0, 0, 0.2);
    height:20px;
    vertical-align:central;
}

nav ul {
    padding:0;
    margin:0;
}

nav ul li {
    list-style: none;
    float:left;
    background-color:rgba(0, 0, 0, 0.5);
}

nav ul li a {
    text-decoration:none;
    color:white;
    font-family:'Merriweather', Baskerville, "Century Schoolbook L", "Times New Roman", serif;
    font-weight:300;
    color:white;
    font-size:0.9em;
}

li a:hover {
    font-style:italic;
    word-spacing:3px;
    height:20px;
}

nav ul li ul {
    display:none;
}

nav ul li:hover ul {
    z-index:5;
    display:list-item !important;
    position:absolute;
    margin-top:90px;
}

nav ul li:hover ul li {
    float:none;
}

还有一个 JSFiddle 链接，它向您显示一个框，它是 Logo ，当您将鼠标悬停在它上面时，菜单会出现在它下面......我的目标是让该菜单列表逐渐消失，而不是跳出标识。 JSFiddle

Answer 1

如果您不想使用 jQuery，请尝试使用 CSS3 转换。我认为您的标记可能需要重写，但例如尝试:

transition:All 1s linear;
-webkit-transition:All 1s linear;
-moz-transition:All 1s linear;
-o-transition:All 1s linear;