<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <style type="text/css"> <!-- .tips { /* tips というクラス名のスタイル */ position: absolute; /* 表示位置の設定 */ visibility: hidden; /* 非表示の設定 */ width: 100px; /* 表示部の横幅 */ background-color: #ffeeff; /* 背景色 */ border: 1px solid #0000ff; /* 線の太さ、線の種類、枠線の色 */ font-size: 10pt; /* フォントの大きさ */ font-family: Tahoma, Verdana; /* フォントの指定 */ text-align: center; /* 文字の位置 */ } --> </style> <script type="text/javascript"> <!-- function show(id) { if (document.getElementById) { var ele = document.getElementById(id); ele.style.visibility = (ele.style.visibility == "visible") ? "hidden": "visible"; } } // --> </script> </head> <body> <!-- 横に表示する場合 --> <span onmouseover="show('menu0');" onmouseout="show('menu0');"> <a href="../../anime/index.html">Animation Gif</a> <span id="menu0" class="tips"> <a href="../../anime/anime01.html">No.01</a><br> <a href="../../anime/anime02.html">No.02</a><br> : : <a href="../../anime/anime09.html">No.09</a><br> <a href="../../anime/anime10.html">No.10</a><br> </span> </span> <!-- 下に表示する場合 --> <span onmouseover="show('menu1');" onmouseout="show('menu1');"> <a href="../../hamu/index.html">Hamu's Room</a><br> <span id="menu1" class="tips"> <a href="../../hamu/hamu01.html">01</a> <a href="../../hamu/hamu02.html">02</a> : : <a href="../../hamu/hamu24.html">24</a> <a href="../../hamu/hamu25.html">25</a> </span> </span> </body> </html>
onmouseover と onmouseout で引数に指定した値を代入して、その代入された id 名のエレメントの表示と非表示を切り替えます。初めの span で囲まれた領域に触れると id 指定された部分（入れ子になっている span）が表示され、離れると非表示になります。
つまり、メインのリンクに触れると通常時は非表示になっている id 指定している部分が表示され、その表示された部分も初めの span で囲まれている領域内なので、表示する状態が引き継がれる仕組みになっています。逆に表示されている場合、リンクもしくは表示されているエレメントからマウスが離れると非表示になります。
表示される位置は、メインのリンクのあとに改行すると真下に表示され、なにも入れないと右側の表示されます。最低限のスタイルしか記述していませんので、表示する中身に対してスタイルの数値などを変更してみてください。