CSSでポップアップメニューを作成したがIEだけメニューが表示されません。

解決済

質問者：nana_watuki
質問日時：2006/07/02 23:29
回答数：4件

下記のようなCSSでポップアップメニューを作成したのですが
IEだけポップアップメニューが表示されませんでした。

IEでもポップアップメニューが表示されるようにするには
どのようにすればよいのでしょうか？（JavaScriptは未使用で作成）

<html>
<head>
<style type="text/css">
#menu {
position: relative;
width: 102px;
height: 22px;
}
#menu li {
list-style-type: none;
float: left;
}
#menu li a {
color: gray;
width: 100px;
height:20px;
text-decoration: none;
text-align: center;
border: 1px solid gray;
display: block;
}
#menu li a:hover {
background-color:#FFFFCC;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display:block;
position:absolute;
top: 22px;
left: 0;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">home</a>
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

回答者： koutarou504
回答日時：2006/07/03 03:41

ＩＥ及びOpera6では、

＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」
（下記参照URLより引用）

という事で、Ａ要素との組み合わせでないと「hover」というタイミングを指示できないので、実現不可能ではないかと・・・。
動的処理なのに契機が指示できないのは、ちょっと・・・。
また、今回はその包括範囲内にＡ要素が別途必要な訳なので、ダミーでＡ要素で囲うという事はＡ要素の入れ子となり不可能・・・。

という事で、ＣＧＩで事前にブラウザの判定をして表示ページを振り分けるでもしない限り、ＣＳＳのみでのポップアップメニューはあきらめるか、
ＩＥの場合は該当ＣＳＳを無効になる様に仕掛けを作るか・・・・・。

参考URL：http://hp.vector.co.jp/authors/VA022006/css/corr …

- 0
- 件

通報する

この回答へのお礼

＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」

確かにこれでは不可能ですね。ＣＳＳのみでのポップアップメニューはあきらめます。

ご回答いただきどうもありがとうございました。

通報する

お礼日時：2006/07/03 04:21

No.3

回答者： steel_gray
回答日時：2006/07/03 02:07

良き代替手段は思いつきませんが、とりあえず原因は

IEではリンクアンカー(hrefを指定した<a>)以外では
hover擬似クラスに対応していない

ためだと思います。

- 0
- 件

通報する

この回答へのお礼

＞IEではリンクアンカー(hrefを指定した<a>)以外では
＞hover擬似クラスに対応していない

なるほど。これでは理論上は無理みたいですね。

ご回答いただきどうもありがとうございました。

通報する

お礼日時：2006/07/03 04:18

No.2

回答者： noname#19206
回答日時：2006/07/03 00:31

ただ単に IE が対応していない CSS であるだけだと思います。

こういうのは古いブラウザで使えない可能性があるから JavaScript にしたほうが無難です。

…が、そうやって JavaScript 未使用のメニューを作った努力を無駄にしてはいけません。
どこかで再利用するのもひとつの手段です(^^)

この回答への補足

確かに古いブラウザでは使用できませんが将来的には
必要になるかと思うのでどうしても知りたいのです。

ちなみに上記のソースはIEでは動作しませんでしたが
Firefox,Opera,Netscapeなどでは動作しました。

おそらくIEのバグが原因かと思うのですが
何か良い方法はないものでしょうか。
せめてIE６だけでもちゃんと表示できるようになればよいのですが・・・

補足日時：2006/07/03 01:01

通報する