jQuery가 호버의 드롭 다운 메뉴에서 깜박임

Question

개발중인 사이트가 있습니다. 마우스를 가져 가면 드롭 다운 메뉴가 깜박입니다 (대부분의 경우).

웹 사이트는 여기에 있습니다 : http://www.wya.hardingweb.net

하위 메뉴에 대한 CSS는 다음과 같이이다 :

#nav ul { 
    position: absolute; 
    left: 0; 
    display: none; 
    margin: 0 0 0 -1px; 
    margin-top: 5px; 
    padding: 0; 
    list-style: none; 
    background-color: rgba(221, 221, 221, 0.7); 
    border: 1px solid #cccccc; 
} 

#nav ul li { 
    width: 150px; 
    float: left; 
    border-top: 1px solid white; 
} 

#nav ul li.long { 
    height: 50px; 
} 

#nav ul a { 
    font-family: helvetica; 
    font-size: 15px; 
    display: block; 
    line-height: 18px; 
    padding: 6px 0px; 
    color: #252060; 
} 

#nav ul a:hover { 
    text-decoration: underline; 
} 

이 다음과 같은 jQuery를 (추출물)에 의해 트리거됩니다 :

$(document).ready(function() { 

//Menu system 
$('#nav li').hover(function() { 
    //show its submenu 
    $('ul', this).slideDown(100); 

}, function() { 
    //hide its submenu 
    $('ul', this).slideUp(100); 
}); 

}); 

나는이 슬라이드 쇼도 실행 중입니다. 슬라이드 쇼용 jQuery를 비활성화하면 메뉴 깜박임 문제가 계속 반복됩니다.

처음에는 Firefox 11 & 크롬을 사용하고 있습니다.

누구에게 아이디어가 있습니까? 가시와 숨겨진 UL 필터링

감사 나이젤 H

Answer 1

시도는 :

$('#nav li').hover(function() { 
//show its submenu 
$('ul:hidden', this).slideDown(100); 

}, function() { 
//hide its submenu 
$('ul:visible', this).slideUp(100); 
}); 

}); 

Answer 2

당신의 깜박임에 대한 이유는 dropdownmenu의 주요리스트 항목에서 5px 차이가 있다는 것입니다.

을 #nav ul에서 제거하면 제대로 작동합니다.

그러나 이렇게하면 드롭 다운 메뉴 0px이 목록 항목에서 나타납니다. 따라서 ul#nav에있는 padding-bottom을 삭제하고 ul#nav li에 추가하는 것이 좋습니다.

이 수정 한 후에는 코드를 얻어야한다 :

#nav { 
    display: inline; 
    float: left; 
    margin-right: 10px; 
    width: 950px; 
    margin: 0; 
    margin-top: 50px; 
    margin-left: 100px; 
    padding: 0; 
    list-style: none; 
} 

#nav li { 
    font-size: 28px; 
    font-family: code-bold, helvetica, sans-serif; 
    letter-spacing: -1px; 
    padding-left: 20px; 
    padding-right: 20px; 
    color: #d1181e; 
    float: left; 
    display: block; 
    position: relative; 
    z-index: 500; 
    margin: 0 1px; 
    padding-bottom: 5px; 
} 

#nav ul { 
    position: absolute; 
    left: 0; 
    display: none; 
    margin: 0 0 0 -1px; 
    padding: 0; 
    list-style: none; 
    background-color: rgba(221, 221, 221, 0.7); 
    border: 1px solid #cccccc; 
} 

Answer 3

이 시도 :

CSS 그 제안을

#nav ul { 
    margin-top: 0; 
} 

JS가

//Menu system 
$('#nav > li').hover(function() { 
    //show its submenu 
    $('ul', this).slideDown(100); 
}, function() { 
    //hide its submenu 
    $('ul', this).slideUp(100); 
});