cssだけで3段階に連動するプルダウンメニュー

質問

cssだけで3段階に連動するプルダウンメニューは可能でしょうか。2段階なら可能でした。
西村文宏氏によるホームページ作成講座によると2段階のプルダウンメニューなcssだけでjacascriptを使わずに可能です。
http://guide.withabout.net/guide/gp332/23955/2step-pulldown.html

回答No.1

AsarKingChang

３段階じゃなくて、これ１段だけだと思いますよ。
１段が横につながってるだけなので、
複雑に考えず、
１つ目を選択したら、２つ目をdisplay:表示用;に置き換えるを
繰り返せばいいだけかと。
<style>
#nya1 {
display:inline;
}
#nya2,#nya3,#nya4,#nya5 {
display:none;
}
#nya1:checked ~ #nya2,#nya2:checked ~ #nya3,#nya3:checked ~ #nya4,#nya4:checked ~ #nya5 {
display:inline;
}
</style>
<input type="checkbox" id="nya1">押して
<input type="checkbox" id="nya2">押して
<input type="checkbox" id="nya3">押して
<input type="checkbox" id="nya4">押して
<div id="nya5">全部押されたみたいです</div>
例えばこんな感じに。。
なので、元々数に制限はないかと思います。
最初の１個目は、display:noneしたら、全部消えるので
そこだけ注意。
idじゃなくて、classでデフォルトを宣言すれば、もう少し
短くはなりますが、この程度なので。
いいかなと。