- ベストアンサー
オンマウスでメニュー表示 - ソースの内容では無理なのでしょうか？
- 「test」と書かれたメニューテーブルをオンマウスで表示させる方法と、そのテーブルを消す方法について教えてください。
- マウスをメニューと書かれたテーブルから外すと、最後に表示された「test」と書かれたテーブルが表示されたままになってしまいます。
- リンク先のソースの内容では、「test」と書かれたテーブルを消す方法は無理ですか？
- a-pluse
- お礼率62% (10/16)
- その他(ソフトウェア)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>これを下がらなくする方法はあるのでしょうか？ 色々と方法はあるかと思いますが、１つの方法。 修正版 ---------------------------------------------------------------- <html> <head> <title>ポップアップメニュー</title> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style> <!-- #MainMenu { background-color:lightsteelblue; color:black; position:absolute; z-index:99; } #SubMenu { background-color:lightsteelblue; color:black; display:none; } a.SubMenu { color: gray; text-decoration:none; font-weight:bold; } a.SubMenu:hover { color: black; } --> </style> </head> <body> <table id="MainMenu" border="0" cellpadding="0" cellspacing="0"> <tr> <td onmouseover="document.getElementById('SubMenu').style.display='block'" onmouseout="document.getElementById('SubMenu').style.display='none'"> <span class="SubMenu" style="color:Navy;font-weight:bold;">メインメニュー</span> <div id="SubMenu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td> <a class="SubMenu" href="submenu1.html">サブメニュー１</a><br> <a class="SubMenu" href="submenu2.html">サブメニュー２</a><br> <a class="SubMenu" href="submenu3.html">サブメニュー３</a> </td> </tr> </table> </div> </td> </tr> </table> <div style="position:absolute;top:25px;width:100%"> <hr> 中身 </div> </body> </html>
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
例えば、こんな感じ ---------------------------------------------------------------- <html> <head> <title>ポップアップメニュー</title> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style> <!-- #MainMenu { background-color:lightsteelblue; color:black; } #SubMenu { background-color:lightsteelblue; color:black; display:none; } a.SubMenu { color: gray; text-decoration:none; font-weight:bold; } a.SubMenu:hover { color: black; } --> </style> </head> <body> <table id="MainMenu" border="0" cellpadding="0" cellspacing="0"> <tr> <td onmouseover="SubMenu.style.display='block'" onmouseout="SubMenu.style.display='none'"> <span class="SubMenu" style="color:Navy;font-weight:bold;">メインメニュー</span> <div id="SubMenu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td> <a class="SubMenu" href="submenu1.html">サブメニュー１</a><br> <a class="SubMenu" href="submenu2.html">サブメニュー２</a><br> <a class="SubMenu" href="submenu3.html">サブメニュー３</a> </td> </tr> </table> </div> </td> </tr> </table> <hr> </body> </html>
お礼
この度はありがとうございます。 アドバイスいただきましたソースですと、「メインメニュー」にマウスを当ててサブメニューが表示された時に、下のページが全体的に下がってしまいますよね・・・ これを下がらなくする方法はあるのでしょうか？ アドバイスを頂きながら、また質問でお返しになりますが、よろしくお願いします。