将鼠标悬停在菜单项上，子菜单淡入然后消失

Question

当我将鼠标悬停在菜单项上时，我希望子菜单淡入。事实上，我已经做到了。但是，当我尝试单击其中一个子菜单选项时，在我有任何时间单击子菜单项之前，子菜单就会消失。

这是导航菜单的html：

 <div id="nav">
        <ul>
            <li><a href="./index"><div>About Me</div></a>
                <ul>
                    <li><a href="./index">Bio</a></li>
                    <li><a href="./Resume">Resume</a></li>
                </ul>
            </li>
                <li><a href="https://github.com/user_name" target="_blank"><div>Github</div></a></li>
        </ul>
    </div>
</div>

这是用于导航和子菜单的随附 css：

#nav {
background-color: #F8F8F8;
padding-right: 45px;
}

#nav ul {
position: relative;
margin: 10px;
font-family: 'Crete Round';
font-size: 20px;
font-weight: bold;
list-style-type: none;
float:right;
top:22px;
}

#nav ul li {
display: inline-block;
}

#nav ul li a:hover {
color: #33CCCC;
}

#nav ul li a, visited{
margin:10px;
display: block;
text-decoration: none;
text-align: left;
}

#nav ul li:hover ul{
display: block;
}

#nav ul ul {
display:none;
position:absolute;
background-color: #F8F8F8;
z-index:100;
padding-left: -25px;
border: 2px solid #F2F2F2;
border-top: 0;
margin-top: 12px;
}

#nav ul ul li {
display: block;
width:100px;
margin-left:-40px;
}

#nav ul ul li:hover {
background-color: #505050; 
}

#nav ul ul li a:hover {
color:white; 
}

#nav ul li:hover > ul {
opacity: 0;
-webkit-animation: fadein 2s; /* Safari and Chrome */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera */
}

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

我们将不胜感激。

Answer 1

默认情况下，使用关键帧不会保存最终动画状态。所以它回到opacity: 0。 您必须使用带有 forwards 值的动画填充模式来保存它（请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode）。

用法：

#nav ul li:hover > ul {
opacity: 0;
-webkit-animation: fadein 2s forwards; /* Safari and Chrome */
-moz-animation: fadein 2s forwards; /* Firefox */
-ms-animation: fadein 2s forwards; /* Internet Explorer */
-o-animation: fadein 2s forwards; /* Opera */
}

您也可以省略opacity: 0，只要该元素在悬停之前不可见，这也应该有效。

Answer 2

删除程序部分

#nav ul li:hover > ul {
opacity: 0;
-webkit-animation: fadein 2s; /* Safari and Chrome */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera */
}

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