3

私はすべてのブラウザーで動作する CSS ホバー メニューを持っています...驚き -- IE6!

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

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

問題を特定するために、ul最初に表示されるようにして、ホバーアクションを別のものにしてみました。例えば：

#menu_right ul li ul { visibility: visible; }

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

これは役に立ちません。他のブラウザー (IE7+ を含む) では、ulその親にカーソルを合わせると、が赤くなりますlist element。しかし、IE6 ではありません。私は何が欠けていますか？

4

5 に答える 5

8

IE6 は、CSS:hover疑似属性が link 要素以外にある場合、それを認識しません。これには JavaScript を使用する必要があります。条件付きステートメントを試してみてください。jQueryを使用する場合は、IE6 のホバー効果を 3 行 (+/- フォーマット) でコーディングできます。

<!--[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 ステートメントで、コロンの代わりにドットを使用したことを確認してください。

乾杯、

于 2009-09-17T21:03:57.493 に答える
3

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

<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でのみサポートされているためです。<a>

于 2009-09-17T21:28:08.107 に答える
3

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

于 2009-09-20T05:34:47.030 に答える
2

いいえ:hover、何もありません<a>... 神、私はこのブラウザが大好きです。

便利な場所で :hover を使用する<a>か (ほとんどの CSS ホバー メニューのようにリンクのリストである場合は問題ありません)、または既に提案されているように Javascript を使用してみてください。

于 2009-09-17T21:04:06.067 に答える
0

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

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

于 2013-04-11T12:28:16.467 に答える