Наведите указатель мыши на пункт меню, подменю исчезает, затем исчезает

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. Чтобы сохранить его, вы должны использовать режим анимации-заполнения с форвардным значением (см. 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; } 
 
}