- ベストアンサー
CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のような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>
- nana_watuki
- お礼率61% (142/232)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ＩＥ及びOpera6では、 ＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」 （下記参照URLより引用） という事で、Ａ要素との組み合わせでないと「hover」というタイミングを指示できないので、実現不可能ではないかと・・・。 動的処理なのに契機が指示できないのは、ちょっと・・・。 また、今回はその包括範囲内にＡ要素が別途必要な訳なので、ダミーでＡ要素で囲うという事はＡ要素の入れ子となり不可能・・・。 という事で、ＣＧＩで事前にブラウザの判定をして表示ページを振り分けるでもしない限り、ＣＳＳのみでのポップアップメニューはあきらめるか、 ＩＥの場合は該当ＣＳＳを無効になる様に仕掛けを作るか・・・・・。
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
良き代替手段は思いつきませんが、とりあえず原因は IEではリンクアンカー(hrefを指定した<a>)以外では hover擬似クラスに対応していない ためだと思います。
お礼
＞IEではリンクアンカー(hrefを指定した<a>)以外では ＞hover擬似クラスに対応していない なるほど。これでは理論上は無理みたいですね。 ご回答いただきどうもありがとうございました。
ただ単に IE が対応していない CSS であるだけだと思います。 こういうのは古いブラウザで使えない可能性があるから JavaScript にしたほうが無難です。 …が、そうやって JavaScript 未使用のメニューを作った努力を無駄にしてはいけません。 どこかで再利用するのもひとつの手段です(^^)
お礼
ご回答いただきどうもありがとうございました。
補足
確かに古いブラウザでは使用できませんが将来的には 必要になるかと思うのでどうしても知りたいのです。 ちなみに上記のソースはIEでは動作しませんでしたが Firefox,Opera,Netscapeなどでは動作しました。 おそらくIEのバグが原因かと思うのですが 何か良い方法はないものでしょうか。 せめてIE６だけでもちゃんと表示できるようになればよいのですが・・・
- kosa
- ベストアンサー率25% (379/1464)
ポップアップメニューは、JavaScriptを使わないと出来ないと思います
お礼
ご回答いただきどうもありがとうございました。
補足
ここでいうポップアップメニューとはメニューをロールオーバーしたときに 追加のメニューが表示されるもののことです。
お礼
＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」 確かにこれでは不可能ですね。ＣＳＳのみでのポップアップメニューはあきらめます。 ご回答いただきどうもありがとうございました。