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 & Chrome最初進行測試。

有沒有人有任何想法？

感謝 奈傑爾^ h

Answer 1

嘗試過濾可見和隱藏UL：

$('#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上的margin-top: 5px;，那麼它應該可以正常工作。

然而這留下了下拉菜單0px appart從列表項。所以我建議刪除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); 
});