HTML と CSS だけでヘッダにぶら下げ目次を作る

まず結果を見たい人向けソースコードとサンプル

作りたいもの (要件)- ページの上部に常駐するヘッダに各ページへのリンクを含む目次を作りたい.
- 目次はカテゴリごとに分類して, 子ページへのリンクを一覧にしたい.
- カテゴリにマウスカーソルをホバーするか, タップすると子ページの一覧がぶら下がって出てくる.

実装解説HTML は非常にシンプル.

<header> <!-- ヘッダそのもの