z-indexを使用したやり方です。
<head>〜</head>の間に
<script type="text/javascript">
function disp(layName,zindex){
if(document.getElementById)
document.getElementById(layName).style.zIndex=zindex
}
</script>
<head>〜</head>のスタイルに以下を追加。
.box {
position:absolute;top:30px;left:200px; /* ボックスの位置 */
height:300px;width:300px; /* ボックスの大きさ */
padding:10px;
border:#333333 solid 2px;
text-align:center;
background-color:#ffffff; /* 背景は必ず何か入れてください */
}
位置と大きさは、好きに改変してください。
以下は、<body>〜</body>の中
<a href="#" onMouseOver="disp('form1',3);" onMouseOut="disp('form1',1);">なりきり板</a><br><br>
<a href="#" onMouseOver="disp('form2',3);" onMouseOut="disp('form2',1);">待ち合わせ掲示板</a><br><br>
<a href="#" onMouseOver="disp('form3',3);" onMouseOut="disp('form3',1);">ネタバレ掲示板</a><br><br>
<a href="#" onMouseOver="disp('form4',3);" onMouseOut="disp('form4',1);">キャラ人気投票の説明</a><br><br>
<a href="#" onMouseOver="disp('form5',3);" onMouseOut="disp('form5',1);">フリーボードの説明</a><br><br>
<a href="#" onMouseOver="disp('form6',3);" onMouseOut="disp('form6',1);">お絵かき板の説明</a><br><br>
<a href="#" onMouseOver="disp('form7',3);" onMouseOut="disp('form7',1);">心の捨て場の説明</a><br><br>
<a href="#" onMouseOver="disp('form8',3);" onMouseOut="disp('form8',1);">お絵かきチャットの説明</a><br><br>
<a href="#" onMouseOver="disp('form9',3);" onMouseOut="disp('form9',1);">ダイアリーの説明</a><br><br>
<a href="#" onMouseOver="disp('form10',3);" onMouseOut="disp('form10',1);">リンクサイトの説明</a><br><br>
<a href="#" onMouseOver="disp('form11',3);" onMouseOut="disp('form11',1);">トップページの説明</a><br><br>
<div style="z-index:1;" id="form1" class="box">なりきり掲示板の説明</div>
<div style="z-index:1;" id="form2" class="box">待ち合わせ掲示板の説明</div>
<div style="z-index:1;" id="form3" class="box">ネタバレ掲示板の説明</div>
<div style="z-index:1;" id="form4" class="box">キャラ人気投票の説明</div>
<div style="z-index:1;" id="form5" class="box">フリーボードの説明</div>
<div style="z-index:1;" id="form6" class="box">お絵かき板の説明</div>
<div style="z-index:1;" id="form7" class="box">心の捨て場の説明</div>
<div style="z-index:1;" id="form8" class="box">お絵かきチャットの説明</div>
<div style="z-index:1;" id="form9" class="box">ダイアリーの説明</div>
<div style="z-index:1;" id="form10" class="box">リンクサイトの説明</div>
<div style="z-index:1;" id="form11" class="box">トップページの説明</div>
<div style="z-index:2;" id="form13" class="box">（最初から出ている文字）</div>
※ # には正規のリンクアドレス入れてください。
メニューはリスト使ったほうがいいかも？
たぶん、IE以外でも動くと思います。
分からないところは、具体的に聞いてください。
);
}
h1{
color: white;
font-family: "AR PハイカラＰＯＰ体H";
font-size: 600%;
}
h1:first-letter{
font-size: 250%;
float: left;
}
dl#menu{
position: relative;
clear: both;
}
dl#menu dt{
font-size: 200%;
margin: 0px 2em;
}
dl#menu dd.menuiten{
font-size: 150%;
text-align: center;
margin: 0px;
border-width; 4px;
border-style: solid;
border-color: white;
width: 50%;
height: 15em;
}
dl#menu dd dl{
margin: 0em;
}
dl#menu dd dt{
color: #FF4500;
font-size: 150%;
margin: 1em 0em 2em;
}
dl#menu dd dd{
margin: 1em 0em;
}
dl#menu dd p{
margin: 0em;
}
a:link,
a:visited{
color: white;
text-decoration: none; /* リンクが判り辛いのでオススメしません */
}
</style>
<script type="text/javascript">
function DelCom(){
var menuitem = document.getElementById('menu').getElementsByTagName('dd')
for(var i = 0; i < menuitem.length; i++){
if(menuitem[i].className == "menuiten"){
menuitem[i].style.display = "none";
menuitem[i].style.position = "absolute";
menuitem[i].style.top = "0px";
menuitem[i].style.left = "40%";
}
}
}
function ChCom(obj){
var menuitem = document.getElementById(obj);
if (menuitem.style.display != "block"){
menuitem.style.display = "block";
}
else{
menuitem.style.display = "none";
}
}
</script>
</head>
<body onload="DelCom();">
<h1>Place game</h1>
<dl id="menu">
<dt><a href="http://www.geocities.jp/place_game_tales/narikiri_setumei.html"
onmouseover="ChCom('menu1');" onmouseout="ChCom('menu1');">なりきり板</A></dt>
<dd id="menu1" class="menuiten">
<dl>
<dt>なりきり掲示板</dt>
<dd>
<p>このサイトのメインのページです。</p>
<p>テイルズシリーズのキャラになりきって話す掲示板があります。</p>
</dd>
<dd>
<p>初心者でも気軽に参加できますよ！</p>
</dd>
</dl>
</dd>
<dt><a href="" onmouseover="ChCom('menu2');" onmouseout="ChCom('menu2');">test</A></dt>
<dd id="menu2" class="menuiten">
<dl>
<dt>test</dt>
<dd>
<p>testです</p>
</dd>
</dl>
</dd>
</dl>
</body>
</html>
