CSS 메뉴 드롭 다운 호버 호 문제

Question

응답 성있는 드롭 다운 탐색 목록에 문제가있어 상위 링크에서 마우스를 천천히 움직이면 마지막 상위 항목의 하위 메뉴가 대신 표시됩니다.

내가에서 예를 업로드 한 : 당신이 '최고 최대 카드'위에 마우스를 올려 경우 http://webe.emv3.com/aps/twelve/primary.html

다음 하위 메뉴를 향해 천천히 아래로 마우스를 이동, 도움 대신 활성화됩니다.

왜 이런 일이 벌어지고 있는지 알 수 있습니까?

Answer 1

이유를 찾았습니다.

가 위쪽 테두리가 제거 된 경우에도 왼쪽을 가지고, 오른쪽과 아래쪽 테두리 문제를 발생

.rdd-menu .submenu-panel { 
    border-radius:0 0 10px 10px; 
    border:1px solid #ccc; 
    border-top:0; 

: 라인 153-156의 국경에 문제가 있었다. 그들을 제거하면 해결되었습니다.

감사합니다. 고맙습니다.

Answer 2

.rdd-menu .submenu-panel이 (가) 숨겨 지거나 배치되지 않았기 때문입니다. 그래서 당신이 : 부모 위로 마우스를 가져 가면 .submenu-panel이 모두 계속 표시됩니다. height:0은 요소를 숨기지 않습니다.

간단한 :

.rdd-menu .submenu-panel { 
    display: none; 
}  

.rdd-menu li:hover > .submenu-panel { 
    display: block; 
} 

가 해결됩니다. 높이 선언도 무시할 수 있습니다.

편집 : 나는 당신이 그 (것)들에 전환이 있었다는 것을주의했다. 전환을 그대로 유지하려면 하위 메뉴의 화면을 위치 시키면됩니다.

.rdd-menu .submenu-panel { 
    top: -10%; 
}  

.rdd-menu li:hover > .submenu-panel { 
    top: 100%; 
}