折りたたみメニュー作成方法(V7での操作)

１　DIVを利用してメインメニューを設定。

挿入→その他→レイアウトコンテナ
フォーカス枠が表示されるので、その中に「Menu_A」と入力しましょう。

２　リストを利用してサブメニューを設定。

リストを挿入する前に、ひとつ注意があります。
「Menu_A」と入力した文字列はフォーカス枠に囲まれていると思います。今回の折りたたみメニューでは<DIV>タグ内にリストを入れません。<DIV>タグ内にリストのタグを挿入しないためには、「Menu_A」の下を一度クリックし、フォーカス枠が表示されていないのを確認して次の操作を行なってください。
挿入→リスト→番号なしリスト
sub_1と入力します。次に改行(Enterキー)し、sub_2と入力。次に改行し sub_3　と入力。

※以上の操作で↓このように表示されていればOKです。
Menu_A

• sub_1
• sub_2
• sub_3

※HTMLソースを確認するとこのようになります。
<div>Menu_A</div>
<ul>
<li>sub_1
<li>sub_2
<li>sub_3
</ul>

※<1>〜<2>の操作を繰り返してメニューを追加していきます。

３　スタイルシートを設定しましょう。(Menu_Aのスタイル)

クラスを利用してスタイルの設定を行なってみます。
まずは、「Menu_A」のサイズと背景色を設定してみましょう。
表示→スタイルシートマネージャー→追加→「クラスのスタイルを設定」
クラス名を「.menu」とします。
「幅」の設定をします。>>「位置」タブをクリックし、「幅」を「100ピクセル」と設定します。
「背景色」の設定。>>「カラーと背景」タブをクリック、「背景色」を設定します。
※HTMLソースでは、このようなタグが確認できます。(「背景色」はオリーブに設定しています)
<style type="text/css">
<!--
.menu{
background-color : olive;
width : 100px;
}
-->
</style>

４　display属性を設定します

新たに「.sub」という名前でクラスを設定します。
HTMLソースを開き、「　.sub { display : none}　」を追加します。

※HTMLソースでは、このようになります。
<style type="text/css">
<!--
.menu{
background-color : olive;
width : 100px;
}
.sub{
display : none
}
-->
</style>