Tabs Within Tabs

I cant for the life of me get the sub tabs to stay visible.

HTML <h1> Mechanized Prime</h1> <input type="radio" name="attr_tab" value="1" title="Character" /> <input type="radio" name="attr_tab" value="2" title="MECH" /> <input type="radio" name="attr_tab" value="3" title="Transport" /> <input type="radio" name="attr_tab" value="4" title="Base" /> <div /> <input type="radio" name="attr_tab" value="5" title="Description" /> <input type="radio" name="attr_tab" value="6" title="Attributes&Skills" /> <input type="radio" name="attr_tab" value="7" title="Combat" /> <input type="radio" name="attr_tab" value="8" title="Inventory" /> <input type="radio" name="attr_tab" value="9" title="Notes" /> <div /> <h2>Character Description</h2> <table/> <tr> <td><input type="text" value="Name" readonly/></td><td><input type="text" name="attr_character_name"/></td> <td><input type="text" value="Eyes" readonly/></td><td><input type="text" /></td> <td><input type="text" value="Level" readonly/></td><td><input type="text" name="attr_character_lvl"/></td> </tr> <tr> <td><input type="text" value="Age" readonly/></td><td><input type="text" /></td> <td><input type="text" value="Hair" readonly/></td><td><input type="text" /></td> <td><input type="text" value="Name" readonly/></td><td><input type="text" name="attr_character_name"/></td> </tr> <tr> <td><input type="text" value="Sex" readonly/></td><td><input type="text" /></td> <td><input type="text" value="Height" readonly/></td><td><input type="text" /></td> </tr> <tr><td><input type="text" value="Ethnicity" readonly/></td><td><input type="text" /></td> <td><input type="text" value="Weight" readonly/></td><td><input type="text" name="attr_Weight"/></td> </tr> </table> </div> <div> <h2>Attributes</h2> <table> <tr> <td><input type="text" value="Name" readonly/></td><td><input type="text" name="attr_base"/></td> <td><input type="text" name="attr_mod"/></td><td><input type="text" name="attr_total"/></td> </tr> </table> <h2>Skills</h2> <table> </table> <h2>Combat Skills</h2> <table> </table> </div> </div> <div> <h3>MECH</h3> <table> <td><table> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td></tr> </table> <td><table> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> </table> <td><table> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> <tr><td><input type="hidden" name="attr_item1"/></td><td><input type="hidden" name="attr_item1"/></td><td></td></tr> </table> </div> <div > <h4>Ship</h4> <td><table> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td> <td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td> <td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td></tr> <tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td> <td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td> <td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td></tr><tr><td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td> <td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td> <td><input type="text" name="attr_item1"/></td><td><input type="text" name="attr_item1"/></td></tr> </table> </div >

CSS /*-----background-----*/ .charsheet { background-image: url(<a href="http://www.beamsat.com/inhoud/uploads/shutterstock_376824967.jpg" rel="nofollow">http://www.beamsat.com/inhoud/uploads/shutterstock_376824967.jpg</a>); background-size: 100%; border: 5px solid #0060B3; border-radius: 5px; border-style: outset; } .sheet-clear { background: none; } /*-----tabs-----*/ /*this hides the contents of each tab by default*/ .charsheet div[class^="sheet-section"] { display: none; } input.sheet-tab1:checked ~ div.sheet-section-character, input.sheet-tab2:checked ~ div.sheet-section-mech, input.sheet-tab3:checked ~ div.sheet-section-transport, input.sheet-tab4:checked ~ div.sheet-section-base, input.sheet-tab5:checked ~ div.sheet-section-description, input.sheet-tab6:checked ~ div.sheet-section-skillsandattributes, input.sheet-tab7:checked ~ div.sheet-section-combat, input.sheet-tab8:checked ~ div.sheet-section-inventory, input.sheet-tab9:checked ~ div.sheet-section-journal,{ display: block; } input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: inline-block; } input.sheet-tab { width: calc(20% - 4px); max-width: 200px; height: 20px; outline: none !important; position: relative; cursor: crosshair; z-index: 1; margin-left: 1px; margin-right: 1px; margin-bottom: 1px; margin-top: 1px; } input.sheet-tab::before { content: attr(title); display: inline-block; color: #FE9001; background-image: url(<a href="http://img09.deviantart.net/b141/i/2008/123/6/a/scratches_by_struckdumb.jpg" rel="nofollow">http://img09.deviantart.net/b141/i/2008/123/6/a/scratches_by_struckdumb.jpg</a>); background-size: 200%; font-size: 14px; font-weight: bold; font-style: normal; text-align: center; width: 144px; height: 15px; border: 5px solid #0060B3; border-radius: 5px; border-style: outset; margin-bottom: 2px; padding: 2px; } input.sheet-tab:checked::before { color: #010101; background: radial-gradient(#FECB00, #FE5D00); border: 4px solid #0060B3; border-radius: 5px; border-style: inset; width: 144px; margin-bottom: 2px; padding: 2px; } .sheet-tab-br { border-bottom: 1px transparent; margin: 2px; padding: 2px; } /* START Div hide for compartments */ input.sheet-compartment { float: left; } input.sheet-compartment ~ div.sheet-compartment { display: none; } input.sheet-compartment:checked ~ div.sheet-compartment { display: inline; } div.sheet-compartmentcontainer{ width: 20em; height: 10em; } /* END Div hide for compartments */

If Anyone can help&nbsp;

I haven't read the code closely, and the forum seems to have stripped out all the classes since you didn't post the code in the code block, but it seems you are using the same attr_tab name for both the outer and the inner tabs. Try using a different name for the inner ones, otherwise the outer ones will become deselected once you click on the inner ones (since they're all radios with the same name).