メニュー項目にマウスを合わせると、サブメニューがフェードインして消えます。

Question

メニュー項目の上にマウスを置くと、サブメニューがフェードインします。しかし、サブメニューオプションの1つをクリックしようとすると、サブメニューをクリックする時間がなくなる前にサブメニューが消えます。ここ

は、ナビゲーションメニューの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に戻ります。 アニメーション塗りつぶしモードで転送値を使用して保存する必要があります（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; } 
 
}