CSSだけで折りたたみってのは実現できていないのが普通らしい。
やっぱりココはjQueryの出番のようで、どのアコーディオンナビゲーションに至ったかの説明をしようかと思います。
検索でよく出てくるこの折りたたみJS
http://wolfrosch.com/works/webdesign/expand
これは欠点として、bodyのonloadを使うので、バッティングしたりコンフリクトするものもある。実際使おうと思ったサイトで、OnLoadを他でも使っていて両方機能しないなんてことになった。なので、結局却下。
次に検討したのが、このjQuery
http://coder.blog.uhuru.co.jp/js/easy_accordion
このスクリプトも凄くシンプルで使いやすいのだが、OnとOffというか開いている時と閉じている時のマークやアイコンがいまいちだったので、辞めた。
次に良さそうなのがあったが、これは試さず。
http://www.geekzshu.com/jquery/975
http://jquery.andreaseberhard.de/toggleElements/
結局このjQueryが一番秀逸だったので、これを使っていこうと思った。
JQUERY COLLAPSE
http://webcloud.se/code/jQuery-Collapse/
divやulの真上に記述するとそのdivやulが折りたたみ状態になるという優れ物になるのが、このjQueryのすごいところ。アイコンで開閉のプラス・マイナスもCSS画像ででてきてる。
一番使いやすいのが、classにactiveの可否を付けられること。サイトの箇所によっては、折りたたみする必要がないところや突然使わなければならない箇所などに便利。