Bootstrap 3 nesting tabs

I'm creating an application and there's a lot of content so I am putting them in nested tabs. All works well except when I click on the nested tab, the content does not show.

<ul class="nav nav-tabs">
  <li class="active"><a href="#minecraft" data-toggle="tab">Minecraft</a></li>
  <li><a href="#website" data-toggle="tab">Forums</a></li>
  <li><a href="#pokemasters" data-toggle="tab">Pokemasters</a></li>
  <li><a href="#runerage" data-toggle="tab">Rune Rage</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="minecraft">
    <ul class="nav nav-pills" id="pills">
      <li class="active"><a href="#minecraft-registration" data-toggle="tab">Minecraft Registration</a></li>
      <li><a href="#minecraft-rules" data-toggle="tab">Rules</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="minecraft-registration">
            <div class="tab-pane fade" id="minecraft-registration">
                test
            </div>
        </div>
    </div>
  </div>

  <div class="tab-pane fade" id="website">Forums</div>
  <div class="tab-pane fade" id="pokemasters">Pokemasters</div>
  <div class="tab-pane fade" id="runerage">Rune Rage</div>
</div>

The code above produces this:

It's functional however, the content of the nested tab isn't shown. The content should show test but it's blank.

Nested tabs is not like this in bootstrap. You should use Dropdowns.

Working Demo

HTML

   <li class="dropdown active">
          <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Minecraft <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li class=""><a href="#minecraft" tabindex="-1" data-toggle="tab">Minecraft Registration</a></li>
            <li class=""><a href="#minecraftrules" tabindex="-1" data-toggle="tab">Rules</a></li>
          </ul>
        </li>