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;
}
------------------------------------------
以上、宜しくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございます ie6を使ってますが参考サイトではサブメニューは表示されないみたいですね