アコーディオンメニューの記述

質問

スマホ用のホームページを作成している素人です。
ページ内にアコーディオンメニューを入れたいと思っています。
http://triplexxx.jp/archives/150
上記のサイトを参考に1段のメニューは作れました。

もう1段追加して2段にしたいのですが、html、ｃｓｓ、ｊｓ それぞれどうやって記述したらいいかわかりません。
「アコーディオンメニュー 2段」で検索してみたのですが、上記参考ページと全然違うので私には理解できませんでした。
htmlのみ<ul>～</ul>を入れ子にしてみましたがうまくいきません。

どの部分にどういった記述を加えればいいのでしょうか？

回答No.1

ORUKA1951

アコーディオンメニューと言う時点で、そのメニューは二階層のリストだと言う事はわかりますよね。
　HTMLには文書構造しか書きませんから、単純に
<nav>
　<ol>
　　<li><a href=""></a>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ol>
　　</li>
　　<li>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ol>
　　</li>
　</ol>
</nav>
　後方互換を考えると<nav>～</nav>は、<div class="nav">～</div>のほうが良いでしょう。
　あとは普通にスタイルシートでデザインするだけです。
[例]
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　のどのスタイルシート(プルダウンと書かれているスタイルシート)を選択しても、スマホで(もちろんパソコン)でも利用できました。
　これをゆっくり開くようにするためには、CSS3のtransformを使用すれば良いでしょう。