画像の上にあるプルダウンボタンが反応しません。

Question

画像の上にあるプルダウンボタンが反応しません。
プルダウンメニューを作成しており、無事制作できたのですが、メニューの下にタイトル画像を置いたとたん、画像にかかる部分のリンクが押せない状態になってしまいました。

ちなみに、このサイトを参考に作りました。
http://www.ne.jp/asahi/hatakeyama/design/csslayout/kowaza/index03.html

プルダウンメニューに画像が重なるとメニューのリンクが押せなくなってしまいます。どのように回避すればよいかご存知の方いらっしゃれば教えてください。
画像ではなく背景にした場合や何もない場合は普通にリンクを押すことができます。
ただ、画像にメニューがかかることが多いのでなんとか回避したいと思っています。

どうぞよろしくお願いいたします。

windows vista　ie7

hujitomo · Accepted Answer

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 のみ互換モードでレンダリングされてる？ → ドキュメントタイプ宣言が怪しい。と推理する事が可能です。

hujitomo · Answer

＞ソースは参考サイトの通りです。

メニュー箇所の 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 · Answer

ソースが解らないのでなんともいえませんが、 z-index でなんとかなりませんか？

画像の上にあるプルダウンボタンが反応しません。

OK、謎は全て解けた

＞ソースは参考サイトの通りです。

この回答への補足

ソースが解らないのでなんともいえませんが、 z-index でなんとかなりませんか？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング