jacascriptで作ったドロップダウンメニューが下の画像に隠れる

解決済

質問者：testid
質問日時：2009/03/31 16:16
回答数：5件

ドロップダウンメニューがＩＥ６だと
ドロップしたメニューが下の画像の下に隠れてしまいます。
回避方法はありますでしょうか？
ソースは
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
<script type="text/javascript"></script>
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
<div id="jumpmenu">
<table>
<tr>
<td><img src="image/11_b_e03_r1_c1.jpg" width="80" height="42"></td>
<td>
<div onMouseover="visiblemenu('menu01')" onMouseout="hiddenmenu('menu01')">
<a href="#"><img src="image/11_b_e03_r1_c2.jpg" width="117" height="42" id="n11_b_e03_r1_c2"></a><br>
<div id="menu01" class="menubox">
<a href="#" class="link"><p class="menu">メニュー１</p></a>
<a href="#" class="link"><p class="menu">メニュー１</p></a> </div>
</div>
</td>
<td><img src="image/11_b_e03_r1_c3.jpg" width="23" height="42"></td>
<td>
<div onMouseover="visiblemenu('menu02')" onMouseout="hiddenmenu('menu02')">
<a href="#"><img src="image/11_b_e03_r1_c4.jpg" width="117" height="42" id="n11_b_e03_r1_c4"></a><br>
<div id="menu02" class="menubox">
<a href="#" class="link"><p class="menu">メニュー１</p></a>
<a href="#" class="link"><p class="menu">メニュー１</p></a> </div>
・
・
・
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
ＣＳＳは
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
img {border:0; vartical-align:top;}

#jumpmenu {width:1000;}
#jumpmenu table {width:1000; border-collapse:collapse;}
#jumpmenu table td {padding:0;}

#jumpmenu table td p.menu {
text-decoration :none;
border :1px solid #ece9d8;
padding :5px;
margin :0;
display :block;
font-family :Verdana, Arial, Helvetica, sans-serif;
font-size :14px;
text-align :left;
}

#jumpmenu table td a:link p.menu {color:#fff; background:#b4c1cf;}
#jumpmenu table td a:visited p.menu {color:#fff; background:#b4c1cf;}
#jumpmenu table td a:hover p.menu {color:#333; background:#ccc;}
#jumpmenu table td a:link.link {text-decoration :none;}

#jumpmenu table td .menubox{
width :180px;
position :absolute;
border :1px solid #555;
display :none;
}

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
です。
よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (5件)

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

No.4ベストアンサー

回答者： fujillin
回答日時：2009/04/08 21:48

こんにちは。

No2です。
少し時間があったので、実験してみました。

どうやら、メインのimgからmouseoutした時点で、イベントが発生してしまうみたいですね。
さらには<a>タグ（メニュー1の表示）から移動する度にもイベントが発生して非表示にしているみたいです。（実際は↑どれかひとつで非表示になるのですが…）

…で、一応、似たものを書き直して見ましたのでご参考までに。
（IE6で検証。他のブラウザはきちんと確認してはいません。）

メニューの構成をクラス名で分けるようにして、「menu」で1つのセットで、「main」が常に表示する部分、「submenu」が表示が切り替わる部分です。
「menu」と「main」、「submenu」は親子になるようにしてください。（孫は不可）

方法としては、非表示にするのにタイムラグを設けて、その間に次の（表示）イベントが発生したら、非表示にするのを取りやめるという考え方です。
また、HTMLの構成を見やすくするためにイベントの設定もスクリプト側で行うようにしていますので、スクリプトが少々長くなっています。
ついでにtableも必ずしも必要なさそうなので、外しています。

<html>
<head>
<style type="text/css">
.menu {
margin: 0;
padding: 0;
float: left;
}
.menu img {
display: block;
height: 42px;
border: 0;
}
.submenu {
visibility: hidden;
position: absolute;
z-index: 3;
}
.submenu a {
display: block;
width: 180px;
padding: 5px;
text-decoration: none;
border: 1px solid #ece9d8;
background: #b4c1cf;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
}
.submenu a:hover {
background: #ccc;
color: #333;
}
</style>
<script type="text/javascript">

</script>

</head>
<body>
<div id="jumpmenu">

<div class="menu"><img src="./A.jpg" width="80"></div>

<div class="menu">
<a href="#" class="main"><img src="./B.jpg" width="117"></a>
<div class="submenu">
<a href="#">メニュー１</a>
<a href="#">メニュー２</a>
<a href="#">メニュー３</a>
</div></div>

<div class="menu"><img src="./C.jpg" width="23"></div>

<div class="menu">
<a href="#" class="main"><img src="./D.jpg" width="117"></a>
<div class="submenu">
<a href="#">メニュー４</a>
<a href="#">メニュー５</a>
</div></div>

<br style="clear:left;">

</body>
</html>

- 0
- 件

通報する

No.5

回答者： fujillin
回答日時：2009/04/08 22:56

No4です

No4の回答ははじめの<div id="jumpmenu">タグを閉じ忘れてます。^^;ゞ
すみませ～ん。　念のため…

- 0
- 件

通報する

この回答へのお礼

大変ありがとうございました。
思ったとおりに実装できましたので
ご報告いたします。

長い間、間隔があいてしまったことを
お詫び申し上げます。

通報する

お礼日時：2009/07/13 10:49

No.3

回答者： sample_
回答日時：2009/04/01 21:16

No.1の者です。

私も試してみたところNo.2さんのおっしゃられる
通りきちんと表示されていると思います。
Versionは IE6.029です。

参考までに画像を添付しておきます。

- 0
- 件

通報する

この回答へのお礼

確かに、表示はされるんです。
言い方が悪かったかもしれません。すいません。

ただ、クリックできないんです。
クリックしようとしてドロップダウンメニューにマウスを持っていくと
メニューが消えてしまうんです。

IE6だけ・・・。
半ば諦めかけてます・・・。

通報する

お礼日時：2009/04/02 12:22

No.2

回答者： fujillin
回答日時：2009/04/01 13:12

ＩＥ6.0.28で実験しましたが、再現しません。

『下の画像』がないので、HTMLに以下を付け加えています。
　</td></tr></table>
　<img src="a.jpg" width="800" />
　</div>

DOCTYPE宣言なし、HTML 4.01 Strict、etc、XHTML 1.0などで実行しても全て下のa.jpgの上に表示されます。

ご質問文にはないCSSが関係していることはありませんか？