CSSとJavaScriptを使ってドロップダウンメニュー

締切済

質問者：momotarovs
質問日時：2008/08/20 12:20
回答数：2件

こんにちわ。
ＩＥ６、ＩＥ７上で動くＨＴＭＬを作成しています。

スタイルシートとJavaScriptを使ってドロップダウンメニューを実現しようと思ってます。ＩＥ６では問題ありませんがＩＥ７で次の現象がッ発生します。

ブラウザ内で表示されている文字を反転させて、親メニュー上をマウスオーバーしていくと、マウスがメニューから離れたあとも、サブメニューの残像が残ります。
以下にサンプルソースを記載いたします。
親メニューはてすと、てすと2。
”てすと”メニューには、サブ１、サブ２、
”てすと2”メニューには、サブ３、サブ４のサブメニューを構成させています。

ＩＥ７でもマウスアウトさせた際、サブメニューの残像が残らないようにするには、どのような修正を加えるべきでしょうか？
原因と対策方法、ご教授ください。

test.html
---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=stylesheet type=text/css href=default.css>
<title>TEST Homepage</title>
</head>
<body>
<div id='menu'>
<ul>
<li><a target='_top' href='a.html'>てすと</a>
<ul><li><a target='_top' href='b.html'>サブ１</a>
<li><a target='_top' href='c.html'>サブ２</a></li>
</li>
</ul>
</li>
<li><a target='_top' href='a.html'>てすと2</a>
<ul><li><a target='_top' href='b.html'>サブ３</a>
<li><a target='_top' href='c.html'>サブ４</a></li>
</li>
</ul>
</li>

</ul>
</div>

<script type='text/javascript'>
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<br>
<br>
<br>

<hr>
ＩＥ７の場合、ここをマウスカーソル反転させててすと１→てすと２メニューをhoverさせると！てすと１のサブメニューの残像が残る。
ＩＥ６は問題なし。
------------------------------------------

CSSスタイルシート
------------------------------------------
#menu {
width: 750px;
margin: 0 auto;
padding-top: 11px;
white-space: nowrap;
}

#menu ul {
padding: 0;
margin: 0;
margin-left:auto;
margin-right:auto;
list-style: none;
}

#menu li {
float: left;
background: #87CEFA;
margin-right: 3px;
border-top: 4px solid #00aaaa;
}

#menu li:hover, #menu li.sfhover {
background: #BFFF00;
}

#menu li ul {
position: absolute;
width: auto;
left: -999em;
border:2px solid white;
border-top:none;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

#menu li ul li {
float: none;
margin-right: 0px;
border-top:2px solid white;;
text-align:left;
}

#menu a {
display: block;
width: auto;
padding: 20px 5px 5px 5px;
color: #000000;
}

#menu a:hover {
color: #000000;
}

#menu li ul li a {
padding: 5px 5px 5px 5px;
}
------------------------------------------
以上、宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： hetare560
回答日時：2008/08/21 14:55

こんにちは。

もしかして【*】や【body】にzoomを指定していませんか？

僕自身も同様の現象に一週間ぐらい悩み、解決策がわからずスタイルを一個ずつ消して原因を調査していったところ、
最後の最後でzoomに原因がある事がわかりました。

もしzoomを指定しているのであれば外してみて下さい。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
>もしかして【*】や【body】にzoomを指定していませんか？
調べてみたところ、使っておりませんでした。
zoomを指定していると同じ現象にあたるのですね。
勉強になりました。

本件は至急解決する必要があったので、他の方法模索しました。
ＣＳＳでプルダウンメニューを実現しているサンプルを以下のサイトでみつけ、ＩＥ７でも実現していたので、それを参考に作り直しました。
結果、ＩＥ６，ＩＥ７でも問題なく動作させることができました。
http://css-eblog.com/csstechnique/post-10.html

問題になったロジックは、原因を時間かけて分析したいと思います。
お力添えありがとうございました。

通報する

お礼日時：2008/08/28 16:43

No.1

回答者： _pipi_
回答日時：2008/08/20 19:38

>this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

の部分で""にするのではなく、
hide{display:none;}を付け加えておいて
sfhoverをhideに置き換えてみては？
そしてそれを行うのであれば、
>var sfEls = document.getElementById("menu").getElementsByTagName("LI");
で、すべての<LI>タグを選び出しているけど
ネスト（子？内側？）している部分だけにhideを適用させる必要があります

どうかな？

- 0
- 件

通報する

この回答へのお礼

返答ありがとうございます。
すみません。知識と勉強不足で、
＞ネスト（子？内側？）している部分だけにhideを適用させる必要があります
の意味がわかりませんでした。
追々勉強して、理解に努め問題を解決できましたら、再度、ここにフィードバックさせていただきます。

本件は至急解決する必要があったので、他の方法模索しました。
ＣＳＳでプルダウンメニューを実現しているサンプルを以下のサイトでみつけ、ＩＥ７でも実現していたので、それを参考に作り直しました。
結果、ＩＥ６，ＩＥ７でも問題なく動作させることができました。
http://css-eblog.com/csstechnique/post-10.html

問題になったロジックは、原因を時間かけて分析したいと思います。
お力添えありがとうございました。

通報する

お礼日時：2008/08/28 16:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！