IE6 CSSホバーメニューの問題

Question

CSSホバーメニューがありますが、それはすべてのブラウザーで動作します...驚き-IE6！

#menu_right ul li:hover ul { visibility: visible; }

このulは、最初は明らかに隠されています。親liにカーソルを合わせると表示されますが、表示されません。

問題を特定するために、最初にlist elementを表示にして、ホバーアクションに他の何かを実行させました。例：

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

これは役に立ちません。他のブラウザー（IE7 +を含む）では、親<=>にカーソルを合わせると<=>が赤に変わります。しかし、IE6ではそうではありません。何が足りないのですか？

Answer 1

IE6はCSS :hover疑似属性を認識しません。リンク要素以外に表示される場合です。これにはJavaScriptを使用する必要があります。条件ステートメントを試してください。 jQuery を使用すると、IE6のホバー効果を3でコーディングできます（ +/- format）lines：

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

マーク、CSSステートメントでコロンの代わりにドットを使用したこと。

乾杯、

Answer 2

このようなものを使用する必要があります

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

および<a>の代わりに<li>をスタイルします。 aのサイズを、それが囲むliと同じ正確に同じサイズになるように確認する必要があります。

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

IE6を除くすべてのブラウザーで動作することがわかっているのは、:hover要素でのみ<=>をサポートしているためです。

Answer 3

何でも見てください：hover http://www.xs4all.nl/~ peterned / csshover.html 。この赤ちゃんは、あらゆる種類のIE6ホバー問題を解決します。あなたを解決するかもしれません。

Answer 4

いいえ:hover以外の<a> ...このブラウザが大好きです。

便利な場所にある<=>で：hoverを使用してみてください（ほとんどのCSSホバーメニューのようにリンクのリストである場合は問題ありません）。 / p>

Answer 5

Tal が書いたとおりです。テーブルでどのように機能するかはわかりませんが、この例はIE6で完全に機能します。

http://www.cssplay.co.uk/menus/final_drop.html