IE8でli:hoverが効かない

解決済

質問者：kkmmkkmmm
質問日時：2011/04/11 10:17
回答数：3件

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>

メニューにカーソルをもってきても、
サブメニューが表示されません。

原因や回避方法を教えていただけないでしょうか。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2011/04/13 15:45

たぶんIEを使ってらっしゃる。

IEではDOCTYPEの記述などで標準モードか互換モードかをスイッチしますから、互換モード用にかかれたHTML/CSSを標準モードと混在して使うことは不可能です。
　私は基本的にすべて標準モードで作成しています。今は他のブラウザも多いし、IEもそちらを思考していますから将来的には・・

　スタイルシートをどちらでも使えるように書き換えるしかないでしょう。問題はここだけではないと思われますので

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。

標準モードに変更して、CSSを書き換えることにします。

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

お二方ともありがとうございました。

通報する

お礼日時：2011/04/13 16:26

No.2

回答者： outbrave
回答日時：2011/04/13 14:36

HTML4.01の場合は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
システム識別子と呼ばれる後半の部分がないと動作しませんね。

ページ全体がどのようなレイアウトになっているのかわかりませんけど、システム識別子を入れた状態で css を調整されたほうがよいと思います。

DOCTYPE宣言も css も、そのままでと言われると私ではわかりませんので、他の回答者さんにお願いします。

- 0
- 件

通報する

この回答へのお礼

何度もありがとうございます。

やはり、宣言文を変更した上で、cssを書き換えることにしました。

通報する

お礼日時：2011/04/13 16:23

No.1

回答者： outbrave
回答日時：2011/04/11 15:04

DOCTYPE宣言が入っていると動作し、入っていない場合は動作しませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
以上、ご報告まで。

この回答への補足

ありがとうございます。
DOCTYPE宣言文を調べたところ、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

となっていました。

XHTMLは使えないので、今の宣言文はこのままで、
教えていただいた宣言文から後半のURL部分を追加したところ、動作しました。
が、HPの体裁が崩れました。

cssをこのまま活かしながら、動作させる方法はないでしょうか？
何度も申し訳ありません。

補足日時：2011/04/13 11:08

通報する