[CSS]スクリプト無しで、リスト要素をプルダウンにするスタイルシート

IE6などクロスブラウザ対応の、リスト要素をプルダウンにするスタイルシートのチュートリアルをPro Blog Designから紹介します。

How to Create a Beautiful Dropdown Blogroll Without JavaScript
demo

ドロップダウンは、見出し箇所（p要素）とドロップダウン箇所（ul要素）で実装されており、下記のようになっています。

HTML

<div class="blogroll">

Blogroll
<ul>
<li><a href="http://www.site.com/">Example Site</a></li>
<li><a href="http://www.site.com/">Example Site</a></li>
<li><a href="http://www.site.com/">Example Site</a></li>
<li><a href="http://www.site.com/">Example Site</a></li>
</ul>
</div>

シンプルなHTMLなので、CSSオフ時には見出しとリストがそのまま表示されます。