cssでタブを入れ子構造にしたい。

こんにちは。

htmlとcssを使ってウェブサイトにタブを導入しようとしています。

このサイト(【JS不要、コピペで1分】CSSだけで作るタブ切り替えメニュー【レスポンシブ対応】)のコードを元にタブの中にもう一つタブを入れようとしたところでつまずいてしまいました。

具体的には、2つ目のタブの中身が表示されず、タブとしても機能していません。

以下、コードになります。

html
1<html>
2
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="tab.css">
6    <title>Sample</title>
7</head>
8
9<body>
10    <div class="tab_container">
11        <input id="tab1" type="radio" name="tab_item" checked>
12        <label class="tab_item" for="tab1">タブ1</label>
13        <input id="tab2" type="radio" name="tab_item">
14        <label class="tab_item" for="tab2">タブ2</label>
15        <input id="tab3" type="radio" name="tab_item">
16        <label class="tab_item" for="tab3">タブ3</label>
17        <input id="tab4" type="radio" name="tab_item">
18        <label class="tab_item" for="tab4">タブ4</label>
19        <div class="tab_content" id="tab1_content">
20            <div class="tab_content_description">
21
22                <div class="tab_container"> //変更箇所ここから
23                    <input id="tab5" type="radio" name="tab_item" checked>
24                    <label class="tab_item" for="tab5">タブ5</label>
25                    <input id="tab6" type="radio" name="tab_item">
26                    <label class="tab_item" for="tab6">タブ6</label>
27                    <input id="tab7" type="radio" name="tab_item">
28                    <label class="tab_item" for="tab7">タブ7</label>
29                    <input id="tab8" type="radio" name="tab_item">
30                    <label class="tab_item" for="tab8">タブ8</label>
31                    <div class="tab_content" id="tab5_content">
32                        <div class="tab_content_description">
33                            <p class="c-txtsp">タブ5の内容</p>
34                        </div>
35                    </div>
36                    <div class="tab_content" id="tab6_content">
37                        <div class="tab_content_description">
38                            <p class="c-txtsp">タブ6の内容</p>
39                        </div>
40                    </div>
41                    <div class="tab_content" id="tab7_content">
42                        <div class="tab_content_description">
43                            <p class="c-txtsp">タブ7の内容</p>
44                        </div>
45                    </div>
46                    <div class="tab_content" id="tab8_content">
47                        <div class="tab_content_description">
48                            <p class="c-txtsp">タブ8の内容</p>
49                        </div>
50                    </div>
51                </div>
52
53                <p class="c-txtsp">タブ1の内容</p>
54            </div>
55        </div>
56        <div class="tab_content" id="tab2_content">
57            <div class="tab_content_description">
58                <p class="c-txtsp">タブ2の内容</p>
59            </div>
60        </div>
61        <div class="tab_content" id="tab3_content">
62            <div class="tab_content_description">
63                <p class="c-txtsp">タブ3の内容</p>
64            </div>
65        </div>
66        <div class="tab_content" id="tab4_content">
67            <div class="tab_content_description">
68                <p class="c-txtsp">タブ4の内容</p>
69            </div>
70        </div>
71    </div>
72</body>
73
74</html>

css
1.tab_container {
2    padding-bottom: 1em;
3    background-color: #fff;
4    border:1px solid #37beb0;
5    margin: 0 auto;}
6.tab_item {
7    width: calc(100%/4);
8    padding:15px 0;
9    border-bottom: 3px solid #37beb0 ;
10    background-color: #ececec;
11    text-align: center;
12    color: #37beb0 ;
13    display: block;
14    float: left;
15    text-align: center;
16    font-weight: bold;
17    transition: all 0.2s ease;
18}
19.tab_item:hover {
20    opacity: 0.75;
21}
22input[name="tab_item"] {
23    display: none;
24}
25.tab_content {
26    display: none;
27    padding: 1em 1em 0;
28    clear: both;
29    overflow: hidden;
30}
31#tab1:checked ~ #tab1_content,
32#tab2:checked ~ #tab2_content,
33#tab3:checked ~ #tab3_content,
34#tab4:checked ~ #tab4_content,
35#tab5:checked ~ #tab5_content, //変更箇所ここから
36#tab6:checked ~ #tab6_content,
37#tab7:checked ~ #tab7_content,
38#tab8:checked ~ #tab8_content {
39    display: block;
40}
41.tab_container input:checked + .tab_item {
42    background-color: #37beb0 ;
43    color: #fff;
44}