details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する

DRANK

HTML5からdetails要素が追加された。この要素は折りたたみ可能なウィジェットを作成するもので、open状態になったときだけ子要素（summary要素など）を表示することができる。 このdetails要素を使えばHTMLだけでアコーディオンメニューが簡単につくれるようになる。 今回はこのdetails要素に手を加え、JavaScriptを使わず、HTML/CSSのみでドロップダウンメニューを実装する方法を紹介する。