- 締切済み
CSSとJavaScriptを使ってドロップダウンメニュー
こんにちわ。 ＩＥ６、ＩＥ７上で動くＨＴＭＬを作成しています。 スタイルシートとJavaScriptを使ってドロップダウンメニューを実現しようと思ってます。ＩＥ６では問題ありませんがＩＥ７で次の現象がッ発生します。 ブラウザ内で表示されている文字を反転させて、親メニュー上をマウスオーバーしていくと、マウスがメニューから離れたあとも、サブメニューの残像が残ります。 以下にサンプルソースを記載いたします。 親メニューはてすと、てすと2。 ”てすと”メニューには、サブ１、サブ２、 ”てすと2”メニューには、サブ３、サブ４のサブメニューを構成させています。 ＩＥ７でもマウスアウトさせた際、サブメニューの残像が残らないようにするには、どのような修正を加えるべきでしょうか？ 原因と対策方法、ご教授ください。 test.html --------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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; } ------------------------------------------ 以上、宜しくお願いいたします。
- momotarovs
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- hetare560
- ベストアンサー率66% (28/42)
こんにちは。 もしかして【*】や【body】にzoomを指定していませんか？ 僕自身も同様の現象に一週間ぐらい悩み、解決策がわからずスタイルを一個ずつ消して原因を調査していったところ、 最後の最後でzoomに原因がある事がわかりました。 もしzoomを指定しているのであれば外してみて下さい。
>this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); の部分で""にするのではなく、 hide{display:none;}を付け加えておいて sfhoverをhideに置き換えてみては？ そしてそれを行うのであれば、 >var sfEls = document.getElementById("menu").getElementsByTagName("LI"); で、すべての<LI>タグを選び出しているけど ネスト（子？内側？）している部分だけにhideを適用させる必要があります どうかな？
お礼
返答ありがとうございます。 すみません。知識と勉強不足で、 ＞ネスト（子？内側？）している部分だけにhideを適用させる必要があります の意味がわかりませんでした。 追々勉強して、理解に努め問題を解決できましたら、再度、ここにフィードバックさせていただきます。 本件は至急解決する必要があったので、他の方法模索しました。 ＣＳＳでプルダウンメニューを実現しているサンプルを以下のサイトでみつけ、ＩＥ７でも実現していたので、それを参考に作り直しました。 結果、ＩＥ６，ＩＥ７でも問題なく動作させることができました。 http://css-eblog.com/csstechnique/post-10.html 問題になったロジックは、原因を時間かけて分析したいと思います。 お力添えありがとうございました。
お礼
回答ありがとうございます。 >もしかして【*】や【body】にzoomを指定していませんか？ 調べてみたところ、使っておりませんでした。 zoomを指定していると同じ現象にあたるのですね。 勉強になりました。 本件は至急解決する必要があったので、他の方法模索しました。 ＣＳＳでプルダウンメニューを実現しているサンプルを以下のサイトでみつけ、ＩＥ７でも実現していたので、それを参考に作り直しました。 結果、ＩＥ６，ＩＥ７でも問題なく動作させることができました。 http://css-eblog.com/csstechnique/post-10.html 問題になったロジックは、原因を時間かけて分析したいと思います。 お力添えありがとうございました。