1

開発中のサイトがありますが、ドロップダウン メニューにカーソルを合わせると (ほとんどの場合) ちらつきます。

ウェブサイトはこちら: 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

4

3 に答える 3

3

ちらつきの理由は、メインのリスト項目とドロップダウン メニューに 5 ピクセルのギャップがあるためです。

の を削除するmargin-top: 5px;と、#nav ul正しく機能するはずです。

0pxただし、これにより、リスト項目からドロップダウン メニューが離れたままになります。padding-bottomしたがって、 の を削除して にul#nav追加することをお勧めし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;
}
于 2012-04-18T10:37:53.713 に答える
2

これを試して：

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);
});
于 2012-04-18T10:50:36.433 に答える
0

可視および非表示のulをフィルタリングしてみてください： 

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

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

});
于 2012-04-18T10:22:31.833 に答える