これは、Microsoft のもう 1 つの奇妙な好奇心です。IE8 で特定の要素を表示しようとすると、方法 (スライド、表示、フェード) に関係なく、表示されませんが、表示されます。したがって、IE8 でhttp://www.stratfor.comに移動し、ドロップダウンのメイン メニュー リンクにカーソルを合わせると、ドロップダウンの一部である要素のすぐ下に表示される小さな境界線に気付くでしょうが、表示されません。全部。マウスを下に移動すると、リンクがそこにあり、クリック可能であることがわかりますが、それらは表示されません。リンクをクリックすると、ページがリロードされる前にドロップダウンが表示されます。
サイトの他の領域ではこの問題は発生しないため、これらの要素がどのように設定されているかが重要です。ホバーからバインドまで、さまざまなjQueryメソッドを試しました。ページが読み込まれて正しく表示されると、ドロップダウンをブロックとして設定しました。ドロップダウンをブロックとして設定し、ページが読み込まれるとjQueryで非表示にしましたが、動作は持続します。
私が使用している以下のコードは次のとおりです。
(function ($) {
// Initialize the main menu dropdowns.
Drupal.behaviors.mainMenu = {
attach: function (context, settings) {
$('#block-system-main-menu .site-menu li', context).hover(
function() {
$(this).addClass('is-active');
if ( $('.site-submenu', this).length ) {
$('.site-submenu', this).slideDown('fast');
}
}, function() {
$(this).removeClass('is-active');
if ( $('.site-submenu', this ).length && $('.site-submenu', this).is(':visible')) {
$('.site-submenu', this).hide();
}
});
}
};
}
})(jQuery);
CSS もチェックしてみてください。
これは私を夢中にさせています。どんな助けでも大歓迎です！
更新:ドロップダウンをメニューの下ではなく上に配置しようとしましたが、それが役立つようです。ドロップダウンの親要素がコンテナを通過すると、ドロップダウンボックスを非表示にしているようです（リンクをクリックできるため）。
更新:ドロップダウン メニューがデフォルトで表示されるように設定されている場合、期待どおりに表示されます。次に、それを非表示にして、ホバーに基づいて表示すると、問題が再び発生します。また、親要素の配置と z-index を確認して再確認しました。これは奇妙なものです。IE7 と、私が見つけた IE8 以外のすべてのブラウザとバージョンで動作するからです。