메뉴 항목 위로 마우스를 가져 가면 하위 메뉴가 사라집니다.

Question

메뉴 항목 위로 마우스를 가져 가면 하위 메뉴가 희미 해지기를 원합니다. 그러나 하위 메뉴 옵션 중 하나를 클릭하려고하면 하위 메뉴 항목을 클릭하기 전에 하위 메뉴가 사라집니다.

#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; } 
} 

올바른 방향으로 상관 찔러 크게 될 것이다 :

여기

<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이다 : 여기

네비게이션 메뉴의 HTML이고 고맙습니다.

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; } 
 
}