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のギャップが存在することです。

margin-top: 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); 
});