- ベストアンサー
プルダウンボタンが反応しない問題の解決方法
- プルダウンメニューを作成しており、画像にかかる部分のリンクが押せない問題が発生しています。
- 画像がプルダウンメニューと重なることによってリンクが押せなくなる問題があります。
- 解決方法として、画像を背景にするか、画像とメニューの配置を調整することで問題を回避することができます。
- keromaro21
- お礼率40% (2/5)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
OK、謎は全て解けた システム識別子を省略して書いてないのが全ての原因。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> スタイルシートを使用する場合、ドキュメントタイプ宣言は省略せずにシステム識別子まで記述しないと今回のように謎の現象に苦しめられますよ。 それと Web デザインをするのでしたら、複数のブラウザで表示の確認をするのがオススメ。なにか不都合が起こった際に原因を特定する為の様々なヒントを得る事ができますしね。 例えば今回のケースでいえば、Firefox や Opera では意図した通りの表示＆動作だが、IE では上手く動作しない → つまりCSS の記述は間違えてないっぽい → どうやら IE のみ互換モードでレンダリングされてる？ → ドキュメントタイプ宣言が怪しい。と推理する事が可能です。
その他の回答 (2)
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
＞ソースは参考サイトの通りです。 メニュー箇所の html や CSS はその通りなのでしょうが、その後に続く部分、いわゆるかぶさってしまう部分（画像とか）の記述がわからないから確実な事が言えないんだってば。サンプルにしたってメニューの要素を非表示にする際に visibility を使う場合と display を使う場合の両方が解説してあったりしますので、あなたがどのような方法を取っているかなど他の人には知りようがないのです。解って欲しいなぁ。 ＞設定の方法がわかりません。 失礼しました。凝った事をやりたがってるので、CSS に関して最低限の基本的な知識がある、もしくは解らなくてもある程度自分で調べて解決できる方だと思い込んでいました。少し言葉足らずだったようですね。 「クリックできない」という事は、なんだかよく解らないけど div.mailmenu よりも前面になにかが存在しているのが原因ではないかと推測いたしました（間違ってるかもしれませんけど、とりあえず可能性は一つ一つ潰していかなければ原因は特定できませんから） ですのでまずそれを確認する為に CSS を用いて #sample .mainmenu を html 要素内で最前面に持ってきては？という事を提案したわけです。 とりあえず「絶対にこれより大きい値は使ってない」ってくらいの大げさな値（"9999" とか）を #sample .mainmenu の z-index に設定してみたら如何でしょう？ #sample .mainmenu { width:100px; float:left; z-index:9999;/* ←こんな風に記述 */ } お試しください。 追記：IE7 は z-index 属性の解釈が他の『まともな』ブラウザと異なります。IE7で上手く表示できなくても他のブラウザならキチンと表示される場合もありますのでご注意ください。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
ソースが解らないのでなんともいえませんが、 z-index でなんとかなりませんか？
お礼
ソースは参考サイトの通りです。 z-indexは、親要素を1、プルダウンナビの要素を2でしょうか・・・ 設定の方法がわかりません。 もう少し詳しく教えていただけないでしょうか。
お礼
詳しく教えていただき有難うございました。 すみません、やってみたのですが、やはりうまくいきません・・ ソースはこんな感じです。 http://www.gene-web.com/testtest/100321/Untitled-1.html 教えていただいたz-indexを.menuCと.menuD につけたのですが、うまくいきません。 テーブルページと混在してると駄目だとかあるんでしょうか？？ 色々調べているのですが、何をやってもうまくいかず頼りにさせていただいてしまいました。 よろしければ、もう一度ご確認いただければ幸いです。 よろしくお願いいたします。
補足
a要素に背景をいれることでひとまず解決しました。 上記URLは削除しました。ご協力有難うございました。