このようなメニューはドリームウィーバーとかGoLiveとかいったHTML作成ソフトで作れば簡単にできるそうで、実際にweb上に存在するものの多くがこれらのソフトで作られています。ただこれらのソフトを使っていない人（自分も）にとっては自分で作らなければならないのですが、結構大変です。簡単なサンプルを作りましたので参考にして下さい。
以下の<HTML>以下のソースをコピーしてメモ帳などのエディタに貼り付けて、sample.htmlなどの名前をつけて保存して下さい。メモ帳で保存するときは、テキストファイルで保存しないように注意して下さい。
<HTML>
<HEAD><TITLE>メニューサンプル</TITLE>
<SCRIPT type="text/javascript">
<!--
function showMenu1(menu1,menu2){
document.getElementById(menu1).style.display = 'none';
document.getElementById(menu2).style.display = 'block';
}
function showMenu2(menu){
document.getElementById(menu).style.visibility = 'visible';
}
function hideMenu2(menu){
document.getElementById(menu).style.visibility = 'hidden';
}
//-->
</SCRIPT>
<STYLE type="text/css">
<!--
#M1A { display: block;}
#M1B { display: none;}
#M2A { display: block;}
#M2B { display: none;}
#M3A { visibility: visible;}
#M3B { visibility: hidden;}
#M4A { visibility: visible;}
#M4B { visibility: hidden;}
#M5A { display: block;}
#M5B { display: none;}
#M6A { display: block;}
#M6B { display: none;}
#M7A { visibility: visible; float: left;}
#M7B { visibility: hidden; float: right;}
#M8A { visibility: visible; float: left;}
#M8B { visibility: hidden; float: right;}
*/-->
</STYLE>
</HEAD>
<BODY>
<DIV id="top">
<TABLE border="0">
<TR valign="top">
<TD>
<DIV id="M1A" onMouseOver="showMenu1('M1A','M1B')">
検索1
</DIV>
<DIV id="M1B" onMouseOver="showMenu1('M1A','M1B')" onMouseOut="showMenu1('M1B','M1A')">
検索1
<DIV class="submenu">
<A href="http://www.goo.ne.jp/">Goo</A><BR>
<A href="http://www.google.co.jp/">Google</A>
</DIV>
</DIV>
サンプル
</TD>
<TD>
<DIV id="M2A" onMouseOver="showMenu1('M2A','M2B')">
検索2
</DIV>
<DIV id="M2B" onMouseOver="showMenu1('M2A','M2B')" onMouseOut="showMenu1('M2B','M2A')">
検索2
<DIV class="submenu">
<A href="http://www.yahoo.co.jp/">Yahoo</A><BR>
<A href="http://www.exite.co.jp/">Excite</A>
</DIV>
</DIV>
サンプル
</TD>
<TD>
<DIV id="M3A" onMouseOver="showMenu2('M3B')" onMouseOut="hideMenu2('M3B')">
検索1
</DIV>
<DIV id="M3B" onMouseOver="showMenu2('M3B')" onMouseOut="hideMenu2('M3B')">
<DIV class="submenu">
<A href="http://www.goo.ne.jp/">Goo</A><BR>
<A href="http://www.google.co.jp/">Google</A>
</DIV>
</DIV>
サンプル
</TD>
<TD>
<DIV id="M4A" onMouseOver="showMenu2('M4B')" onMouseOut="hideMenu2('M4B')">
検索2
</DIV>
<DIV id="M4B" onMouseOver="showMenu2('M4B')" onMouseOut="hideMenu2('M4B')">
<DIV class="submenu">
<A href="http://www.yahoo.co.jp/">Yahoo</A><BR>
<A href="http://www.exite.co.jp/">Excite</A>
</DIV>
</DIV>
サンプル
</TD>
</TR>
</TABLE>
</DIV>
<DIV id="left">
<TABLE>
<TR>
<TD>
<DIV id="M5A" onMouseOver="showMenu1('M5A','M5B')">
検索1
</DIV>
<DIV id="M5B" onMouseOver="showMenu1('M5A','M5B')" onMouseOut="showMenu1('M5B','M5A')">
検索1
<DIV class="submenu">
<A href="http://www.goo.ne.jp/">Goo</A><BR>
<A href="http://www.google.co.jp/">Google</A>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV id="M6A" onMouseOver="showMenu1('M6A','M6B')">
検索2
</DIV>
<DIV id="M6B" onMouseOver="showMenu1('M6A','M6B')" onMouseOut="showMenu1('M6B','M6A')">
検索2
<DIV class="submenu">
<A href="http://www.yahoo.co.jp/">Yahoo</A><BR>
<A href="http://www.exite.co.jp/">Excite</A>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV id="M7A" onMouseOver="showMenu2('M7B')" onMouseOut="hideMenu2('M7B')">
検索1
</DIV>
<DIV id="M7B" onMouseOver="showMenu2('M7B')" onMouseOut="hideMenu2('M7B')">
<DIV class="submenu">
<A href="http://www.goo.ne.jp/">Goo</A><BR>
<A href="http://www.google.co.jp/">Google</A>
</DIV>
</DIV>
</TD>
</TR>
</TR>
<TR>
<TD>
<DIV id="M8A" onMouseOver="showMenu2('M8B')" onMouseOut="hideMenu2('M8B')">
検索2
</DIV>
<DIV id="M8B" onMouseOver="showMenu2('M8B')" onMouseOut="hideMenu2('M8B')">
<DIV class="submenu">
<A href="http://www.yahoo.co.jp/">Yahoo</A><BR>
<A href="http://www.exite.co.jp/">Excite</A>
</DIV>
</DIV>
</TD>
</TR>
</TR>
<TR>
<TD>
</TD>
</TR>
</TR>
<TR>
<TD>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
お礼
わざわざ作ってくださり、ありがとうございます！ 参考になりました。