過去数か月間コードが変更されていないため、 http: //weldtite.co.uk/ でドロップダウン メニューの動作がおかしくなり始めました。
ホバーするとリンクの背景が赤くなり、ドロップダウンがある場合はドロップダウンが表示されます。ホバー時にクラスを追加する jQuery が適用されます (IE6 ユーザー向け)。したがって、CSS は次のようになります。
.primary-item:hover a,
.active a,
.primary-item:hover span,
.active span {
background-color: #ed1b2d;
color: #FFF;
}
.primary-item:hover .secondary-nav,
.active .secondary-nav {
opacity: 1;
visibility: visible;
}
これは、すべての内部ページで正常に機能します。
ただし、ホームページには YouTube ビデオが埋め込まれています。YouTube 動画を削除すると、メニューのホバー状態が機能します。それらを元に戻すと、メニューのホバー状態が再び失敗します。
これは Google Chrome (21.0.1180.82) のみの問題のようで、たまにしか発生しません。
私が試したこと:
- iframe に低い z-index を配置します。
- iframe を div でラップし、その div に低い z-index を追加します。
- ビデオの URl に ?wmode=transparent および opaque を追加します。
何か案は?