IE8でli:hoverが効かない

2011/04/11 10:17

このQ&Aのポイント

IE8でli:hoverが効かない問題について、原因と回避方法を教えてください。
ホームページにCSSを使ったドロップダウンメニューを導入しているが、IE8でli:hoverが機能しない。
li:hoverが効かない問題について、CSSやHTMLを確認したが解決しない。サブメニューが表示されない。

IE8でli:hoverが効かない

Window7 IE8を使っています。ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトからｃｓｓドロップダウンメニューの例文をもらってきて書き込んでみましたが、どうしてもサブメニューが表示されません。たとえば、【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、サブメニューが表示されません。原因や回避方法を教えていただけないでしょうか。よろしくお願いします。

kkmmkkmmm
お礼率63% (37/58)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/04/13 15:45 回答No.3

たぶんIEを使ってらっしゃる。 IEではDOCTYPEの記述などで標準モードか互換モードかをスイッチしますから、互換モード用にかかれたHTML/CSSを標準モードと混在して使うことは不可能です。　私は基本的にすべて標準モードで作成しています。今は他のブラウザも多いし、IEもそちらを思考していますから将来的には・・　スタイルシートをどちらでも使えるように書き換えるしかないでしょう。問題はここだけではないと思われますので

質問者

お礼 2011/04/13 16:26

ありがとうございます。標準モードに変更して、CSSを書き換えることにします。 BAがお一人にしかつけられなくて心苦しいですが、標準モード・互換モードを教えていただき、今後の作業を決定することができたということで、ORUKA1951様をBAにさせていただきます。お二方ともありがとうございました。

その他の回答 (2)

outbrave
ベストアンサー率60% (231/380)

2011/04/13 14:36 回答No.2

HTML4.01の場合は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> システム識別子と呼ばれる後半の部分がないと動作しませんね。ページ全体がどのようなレイアウトになっているのかわかりませんけど、システム識別子を入れた状態で css を調整されたほうがよいと思います。 DOCTYPE宣言も css も、そのままでと言われると私ではわかりませんので、他の回答者さんにお願いします。

質問者

お礼 2011/04/13 16:23

何度もありがとうございます。やはり、宣言文を変更した上で、cssを書き換えることにしました。

outbrave
ベストアンサー率60% (231/380)

2011/04/11 15:04 回答No.1

DOCTYPE宣言が入っていると動作し、入っていない場合は動作しませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 以上、ご報告まで。

質問者

補足 2011/04/13 11:08

ありがとうございます。 DOCTYPE宣言文を調べたところ、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> となっていました。 XHTMLは使えないので、今の宣言文はこのままで、教えていただいた宣言文から後半のURL部分を追加したところ、動作しました。が、HPの体裁が崩れました。 cssをこのまま活かしながら、動作させる方法はないでしょうか？何度も申し訳ありません。