Question

我已经按照一些教程进行了调整，并从网站的徽标中创建了一个下拉菜单。

这一切都完美无瑕，正如我所瞄准的那样。为了增加效果，我希望能够让菜单项平静地淡化，而不仅仅是bam。我试图按照教程进行操作，但我认为我已经对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链接，它会显示一个标识框，当你将鼠标悬停在它上面时，菜单会显示在它下方......我的目标是让菜单列表淡出而不仅仅是跳出商标。 JSFiddle

Answer 1

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

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

从图像中淡出下拉CSS

1 个答案: