掲示板/総合質問板/過去ログ/一覧/ ドロップダウンメニューを表示できるが、非表示にできない

0 名前： 待つ子 ： 2007/01/15（月） 05:55 ID:X2K35Qcz: 【何をしたいのか】
オンマウスで表示されたドロップダウンメニューをマウスを外した時点で非表示にしたい。

【現在の状況】
西村文宏さんのホームページを見せていただき、オンマウスでドロップダウンメニューを表示させることには成功しましたが、マウスポインタが関係ない位置へ移動したときに、表示されたメニューがそのままの状態です。

【記述したソース】
どこが重要かわかりませんので、見づらいとは思いますが、ソースの全てを示します。宜しくお願いします。

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>メニュー</title>

<style type="text/css">
div#menubar {
background-color: green;
width: 100%;
}
div#menubar img {
vertical-align: top;
border: 0px;
}
div.hiddenmenus ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 90%;
width: 70px;
}
div.hiddenmenus li {
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: green;
padding: 0.1em 0.3em;
}

div#subMenu01 { position:absolute; top: 20px; left: 0px; visibility: hidden; }
div#subMenu01 ul { background-color: #ffcccc;}
div#subMenu02 { position:absolute; top: 20px; left: 70px; visibility: hidden; }
div#subMenu02 ul { background-color: #ccffff;}
</style>

<script type="text/javascript">
function OpenMenu(id){
document.getElementById( id ).style.visibility = 'visible';
}
function CloseMenu(id){
document.getElementById( id ).style.visibility = 'hidden';
}
</script>

</head>

<body topmargin="0" leftmargin="0">

<div id="menubar">
<a href="#" onmouseover="OpenMenu('subMenu01'); CloseMenu('subMenu02');"><img src="haru.bmp" width="70" height="20"></a><a href="#" onmouseover="OpenMenu('subMenu02');CloseMenu('subMenu01');"><img src="natu.bmp" width="70" height="20"></a><a href="#"><img src="aki.bmp" width="70" height="20"></a><a href="#"><img src="fuyu.bmp" width="70" height="20"></a></div>

<div class="hiddenmenus">


<div id="subMenu01">
<ul>
<li><a href="3gatu.htm">3月</a></li>
<li><a href="4gatu.htm">4月</a></li>
<li><a href="5gatu.htm">5月</a></li>
</ul>
</div>


<div id="subMenu02">
<ul>
<li><a href="6gatu.htm">6月</a></li>
<li><a href="7gatu.htm">7月</a></li>
<li><a href="8gatu.htm">8月</a></li>
</ul>

</div>

</div>

<p>
　</p>

</body>

</html>

1 名前：牛若： 2007/01/15（月） 05:55 ID:p2FyUmHW: それが設計的に正しい考え方だからです。

2 名前： 待つ子 ： 2007/01/15（月） 05:55 ID:riHynrqT: 早速にお返事ありがとうございました。
説明が悪かったですね。
このソースでは、表示されたメニューがそのままの状態であるという事は分かるのですが、これの何処をどう変えたらメニューが非表示の状態になるかを教えていただきたいと思います。
西村文宏さんもそうすることについての説明を省略されていたので、きっと難しいのだとは思いますが、できたら嬉しいと思っています。宜しくお願いいたします。