仕組み自体は、極めてシンプルでして・・こんなものツールを使ったらややこしくなります。(^^)
オーサリングツールじゃ無理でしょう。
階層のあるナビゲーションリストですから、HTMLが次のようにマークアップされているのでしょう。
<div class="nav">
<ol>
<li><a href="A">AAA</a></li>
<li><a href="B">BBB</a>
<ol>
<li><a href="B/1">BBB-1</a>
<ol>
<li><a href="B/1/1">BBB-1-1</a></li>
<li><a href="B/1/2">BBB-1-2</a></li>
<li><a href="B/1/3">BBB-1-3</a></li>
<li><a href="B/1/4">BBB-1-4</a></li>
<li><a href="B/1/5">BBB-1-5</a></li>
<li><a href="B/1/6">BBB-1-6</a></li>
</ol>
</li>
<li><a href="B/2">BBB-2</a></li>
<li><a href="B/3">BBB-3</a></li>
</ol>
</li>
<li><a href="C">CCC</a>
<ol>
<li><a href="C/1">CCC-1</a>
<li><a href="C/2">CCC-2</a>
</ol>
</li>
<li><a href="D">DDD</a></li>
</ol>
</div>
これを、二階層目以下は普段は隠しておいて(display:none)、リスト項目にポインターが乗ると(li:hover)、その下位の項目が表示され---このときそれを囲むブロックは高くなる。さらにそこで表示されたリストに載ると、その下の階層が表示されるが、それはブロックのサイズには影響させないように独立(position:absolute)させる。
★あくまで、どのように表示させたいからHTMLを書くのではなく、HTMLは文書構造だけをどのように表示させるかを考えずにマークアップすることが、HTMLのもっとも大事なことです。そうすれば、さきでメニューをページのサイドにすべて表示させるとか、プルダウン式のすべてにおいてデザインがずれないようにするとか・・どのようにでも変更できます。なによりも、そのほうがHTMLは無論、スタイルシートも簡単になります。
この仕組みをスタイルシートで書くと、
div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;}
div.nav ol{display:block;width:100%;}
div.nav ol li{width:22%;float:left;position:relative;}
div.nav ol li ol{display:none;}
div.nav ol li:hover ol{display:block;}
div.nav ol li:hover ol li ol{display:none;}
div.nav ol li:hover ol li:hover ol{display:block;position:absolute;left:100%;top:0;width:50%;}
div.nav ol li ol li{display:block;width:100%;}
div.section{clear:left;}
となります。
わかりやすいように色をつけたりすると下記のようになります。
★タブは＿に置換してあるので戻すこと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
div.nav{width:100%;text-align:center;line-height:1.6em;}
div.nav a{text-decoration:none;display:block;width:100%;height:100%;}
div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;}
div.nav ol{display:block;width:100%;}
div.nav ol li{width:22%;float:left;position:relative;border:outset 3px gray;}
div.nav ol li ol{display:none;}
div.nav ol li:hover ol{display:block;}
div.nav ol li:hover ol li ol{display:none;}
div.nav ol li:hover ol li:hover ol{display:block;position:absolute;left:100%;top:0;width:50%;}
div.nav ol li ol li{display:block;width:100%;}
div.nav ol li a{background-color:yellow;}
div.nav ol li a:hover{background-color:rgb(255,255,200);}
div.nav ol li ol li a{background-color:aqua;}
div.nav ol li ol li a:hover{background-color:rgb(200,255,255);}
div.nav ol li ol li ol li a{background-color:lime;}
div.nav ol li ol li ol li a:hover{background-color:200,255,200);}
div.section{clear:left;background-color:yellow;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="A">AAA</a></li>
＿＿＿＿<li><a href="B">BBB</a>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li><a href="B/1">BBB-1</a>
＿＿＿＿＿＿＿<ol>
＿＿＿＿＿＿＿＿<li><a href="B/1/1">BBB-1-1</a></li>
＿＿＿＿＿＿＿＿<li><a href="B/1/2">BBB-1-2</a></li>
＿＿＿＿＿＿＿＿<li><a href="B/1/3">BBB-1-3</a></li>
＿＿＿＿＿＿＿＿<li><a href="B/1/4">BBB-1-4</a></li>
＿＿＿＿＿＿＿＿<li><a href="B/1/5">BBB-1-5</a></li>
＿＿＿＿＿＿＿＿<li><a href="B/1/6">BBB-1-6</a></li>
＿＿＿＿＿＿＿</ol>
＿＿＿＿＿＿</li>
＿＿＿＿＿＿<li><a href="B/2">BBB-2</a></li>
＿＿＿＿＿＿<li><a href="B/3">BBB-3</a></li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><a href="C">CCC</a>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li><a href="C/1">CCC-1</a>
＿＿＿＿＿＿<li><a href="C/2">CCC-2</a>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><a href="D">DDD</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>・・・</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>
