CSS 호버 메뉴 문제

CSS 호버 메뉴에 문제가 있습니다.CSS 호버 메뉴 문제

팝업 메뉴의 옵션 중 하나를 선택하면 그 위치가 완벽하게 잘 나타나지만 사라질 때까지 멈추는 방법을 찾을 수 없습니다. 그렇게하는 것으로부터.

하위 메뉴 옵션 중 하나를 선택하자마자 사라지는 것을 막을 수있는 방법이 있습니까?

스택 오버플로 (내가 틀렸다면 올바르게 수정 해주었습니다.)와 같은 것을 찾지 못했지만,이 문제를 제대로 검색하는 방법을 모르기 때문에 그럴 수 있습니다.

jQuery를 사용해 보았지만 동일한 문제가있었습니다.

문제를 완벽하게 보여주는 바이얼 here을 볼 수 있습니다.

감사합니다.

출처

2012-05-02 Joshua M

방화범이 끌리고 그것을 사용하는 법을 배워야합니다. 훌륭한 도구입니다. getfirebug.com .. 답을 알려줍니다. 문제의 원인은 매우 논리적입니다. 첫 번째 수준'li' (': hover' 요소)와 두 번째 수준'ul' (하위 메뉴 요소) 사이에는 갭이 있습니다. 갭은 첫 번째 레벨 'ul'의 큰 패딩에 의해 생성됩니다. (분명히'.navigation'의 작은 패딩은 도움이되지 않습니다.) – Joonas

안녕 Lollero, 나는 방화범이 끌 렸습니다 - 그러나 나는 내가 길을 잃어 버렸기 때문에 너무 오랫동안 그 문제를보고 있었을 것이라고 생각합니다. 내가해야하는대로 생각하고있어. –

당신에게 도움이 될 것입니다 사실 내 자신의 질문.

에 .showup이라는 클래스를 할당하고 .navigaiton ul li ul의 표시를 none으로 설정 한 클래스를 할당했습니다. 나는 다음이 jQuery를 실행

는

$('li:has(ul)').hoverIntent(function() { 
    $(this).find('ul').removeClass('hide'); 
    $(this).find('ul').addClass('showup'); 
}, function() { 
    $(this).find('ul').removeClass('showup'); 
    $(this).find('ul').addClass('hide'); 
})

을 작동하도록하고 지금은 잘 작동합니다!

출처

2012-05-02 17:02:46

당신의 CSS를이 추가 :

li.sign { 
    width: 80% !important; 
} 

.navigation ul li { 
    width: 115%; 
}

출처

2012-05-02 11:31:38

리에서 첫 번째 하위 메뉴 옵션으로 이동하면 문제가 해결되지 않을 수도 있습니다. 사람들은 옵션 위로 마우스를 가져가 팝업 메뉴를보고 원하는 경우 아래쪽을 선택하려고합니다. 그러면 여전히 사라질 것입니다. 그래도 고마워. –

주고 폭 -> .navigation UL 따라 내가 아래 링크를 희망

.navigation ul { 
padding: 20px 20px 20px 40px; 
list-style: none; 
    width:300px; // according to your 
}

출처

2012-05-02 11:34:21

다시 말하지만, 이것은 사람들이하지 않을 하위 메뉴의 '최상위 수준'-> '첫 번째 옵션'에서 somoene이 나올 것이라는 가식에 의존합니다. –

내가 대답

http://jsfiddle.net/j8Ny4/9/

출처

2012-05-02 11:59:20

CSS 호버 메뉴 문제

답변

관련 문제