Question

正如标题所示，我正在尝试创建一个纯CSS下拉菜单。唯一的问题是，无论我尝试过什么，我都无法让下拉线慢慢消失。

仅供参考这不是我可怕的代码，而是来自之前的设计师放弃了这个项目。

感谢。

编辑：由于jsfiddlet链接，我需要在帖子中附上代码，所以这里是菜单。

    <li><a href="/emergencyservices/whatwedo.php" accesskey="3" title="">EMERGENCY SERVICE &nbsp; &nbsp;|</a>
                   <ul>
                   <li><a href="/emergencyservices/whatwedo.php">&nbsp;What We Do</a></li>
                   <li><a href="/emergencyservices/howstaffed.php">&nbsp;How We Are Staffed</a></li>
                   <li><a href="/emergencyservices/referralemerghandling.php">&nbsp;Emergency/Referral Procedure&nbsp;</a></li>
                   <li><a href="/emergencyservices/typesofemerg.php">&nbsp;Types of Emergencies</a></li>
                   <li><a href="/emergencyservices/whattoexpect.php">&nbsp;What to Expect On Arrival</a></li>
                   </ul>
            </li>

Answer 1

您应该使用CSS3动画，虽然并非所有浏览器都支持它们，例如＆lt; = IE9，但这正是它们的用途。您可能想为旧浏览器尝试jQuery。

工作演示JSFiddle

li:hover > ul {
    display: block;
    opacity: 0;
    z-index: 98;
    position: absolute;
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

如何制作纯CSS下拉菜单以淡入/慢速显示

1 个答案: