CSSだけでページ内タブ切り替えを複数したい。

前提・実現したいこと

CSSだけでページ内タブ切り替えをしていました。
以下のようにAをクリックしたらA-1、A-2、A-3のbuttonに装飾したテキストが出てきました。ここまではできたのですが、やりたいことは、
更にこのA-1を押したらA-1-1、A-1-2、A-1-3　A-2を押したらA-2-1、A-2-2、A-2-3といった、さらにページ内タブ切り替えをしたいのですが、どうやってもA-1を押したら最初のA、B、Cが表示されてるだけの表示に戻ってしまいます。
まだまだJSがよくわかっていないのでCSSのみでやってみたのですが、どうやったらできるでしょうか....。
社内に相談できる人がおらず、一人ではどうにもならないのでご相談させていただきました。

最終的にはこのA-1-1をさらにクリックしたら軽い商品詳細ページみたいなものになるので、１ページ内でページ内タブ切り替えを3回したいです。
やはりjsのほうが簡単にできるのでしょうか？。

HTML

　　<input id="tab-A" type="radio" name="tab_item" checked>
    <label class="tab_box" for="tab-A">A</label>

    <input id="tab-B" type="radio" name="tab_item">
    <label class="tab_box" for="tab-B">B</label>

    <input id="tab-C" type="radio" name="tab_item">
    <label class="tab_box" for="tab-C">C</label>

　　<!--Aをクリックしたら出てくるcontents-->
 　 <div class="tab_content" id="tab-1_content">

    <input id="tab-A-1" type="radio" name="tab_item" checked>
    <label class="tab_contents" for="tab-A-1">A-1</label>

    <input id="tab-A-2" type="radio" name="tab_item">
    <label class="tab_contents" for="tab-A-2">A-2</label>

    <input id="tab-A-3" type="radio" name="tab_item">
    <label class="tab_contents" for="tab-A-3">A-3</label>

    </div>

    <!--A-1をクリックしたら出てくるcontents-->
    <div class="tab_content" id="tab-1-1_content">

    <input id="tab-A-1-1" type="radio" name="tab_item" checked>
    <label class="tab_contents" for="tab-A-1-1">A-1-1</label>

    <input id="tab-A-1-2" type="radio" name="tab_item">
    <label class="tab_contents" for="tab-A-1-2">A-1-2</label>

    <input id="tab-A-1-3" type="radio" name="tab_item" checked>
    <label class="tab_contents" for="tab-A-1-3">A-1-3</label>

    </div>

CSS

/*タブのスタイル*/
.tab_item {
  width: 178px;
  height: 50px;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-bottom:5px; 
  border: 1px solid #000;
  margin-right: 15px;
 }

 .tab_item_last{
  width:178px;
  height: 50px;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-bottom:5px; 
  border: 1px solid #000;
  margin-right:0;
 }

 .tab_item:hover,
 .tab_item_last:hover{
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0px;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tab-A:checked ~ #tab-1_content,
#tab-A-1:checked ~ #tab-1-1_content,
{
  display: block;
}