希望我能正确解释这个问题。如果我的术语错了，我道歉。基本上，我正在尝试创建垂直选项卡式内容，这不是问题。这将是美国50个州和加拿大10个省的垂直清单。点击或悬停（我可以去任何一种方式，但更喜欢悬停动作）的州/省我想要一个子菜单出现，它将列出＆＃34;选项＆＃34;为该州/省。我找到了类似于我在这里找到的东西：http://codepen.io/anon/pen/QEmERX但是，当点击子菜单项时，我希望它们也只是内容而不是指向另一个页面的链接，如果这有意义的话。如果这不是正确的术语，我再次道歉。在坚果壳中，我希望使用子菜单生成垂直选项卡式内容，子菜单也是内容面板而不是链接。任何帮助将不胜感激。
CSS
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#aaa;
border-width:1px;
border-style:solid;
}
.tg td{
font-family:paladins;
font-size:28px;
padding:10px 15px;
border-style:solid;
border-width:0px;
overflow:hidden;
word-break:normal;
border-color:#aaa;
color:#333;
background-color:#fff;
}
.tg th{
font-family:paladins;
font-size:18px;
font-weight:normal;
padding:10px 15px;
border-style:solid;
border-width:0px;
overflow:hidden;
word-break:normal;
border-color:#696969;
color:#696969;
background-color:#fff;
}
.tg .tg-yw4l{
vertical-align:top;
}
h1 {
color: #696969;
font-family: 'paladins';
margin:14px;
width: 80%;
}
.tabordion {
color: #ffffff;
display: block;
font-family: paladins;
font-size: 12px;
margin: auto;
position: relative;
width: 100%;
}
.tabordion input[name="sections"] {
left: -9999px;
position: absolute;
top: -9999px;
}
.tabordion section {
display: block;
}
.tabordion section label {
background: #696969;
border:1px solid #fff;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
padding: 10px 17px;
position: relative;
width: 180px;
z-index:100;
}
.tabordion section article {
display: none;
left: 230px;
min-width: 300px;
padding: 0 0 0 21px;
position: absolute;
top: 0;
}
.tabordion section article:after {
background-color: #ff6600;
bottom: 0;
content: "";
display: block;
left:-229px;
position: absolute;
top: 0;
width: 220px;
z-index:1;
}
.tabordion input[name="sections"]:checked + label {
background: #696969;
color: #fff;
}
.tabordion input[name="sections"]:checked ~ article {
display: block;
}
@media (max-width: 533px) {
h1 {
width: 100%;
}
.tabordion {
width: 100%;
}
.tabordion section label {
font-size: 12px;
width: 160px;
}
.tabordion section article {
left: 200px;
min-width: 270px;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-199px;
position: absolute;
top: 0;
width: 200px;
}
}
@media (max-width: 768px) {
h1 {
width: 96%;
}
.tabordion {
width: 96%;
}
}
@media (min-width: 1366px) {
h1 {
width: 70%;
}
.tabordion {
width: 70%;
}
}
HTML
<h1>US AND CANADIAN ASSOCATIONS</h1>
<div class="tabordion">
<section id="section1">
<input type="radio" name="sections" id="option1" checked>
<label for="option1">ALABAMA</label>
<article>
<table class="tg">
<tbody>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="Alaska All Stars - Anchorage, AK" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/Tier1Elite_zpsyxfxo2xc.png" title="Alaska All Stars - Anchorage, AK" /></a></th>
<th style="text-align: left"><a href="" title="Alaska All Stars - Anchorage, AK"><span style="color: #696969">TIER 1 ELITE HOCKEY</span></a></th>
<th><a href="mailto:akallstar_ice@hotmail.com" target="_top"><img alt="Contact Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska All Stars" /></a></th>
<th><a href="" target="_blank"><img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" /></a></th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="Anaheim Jr. Ducks - Ananheim, CA" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AnaheimJrDucksLogo2_zpscvlvog14.png" title="Anaheim Jr. Ducks - Anaheim, CA" /></a></th>
<th style="text-align: left"><a href="">ANAHEIM JR. DUCKS</a></th>
<th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
</tr>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="Belle Tire - Taylor, MI" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/BelleTireLogo2_zps2gmbaf1a.png" title="Belle Tire - Taylor, MI" /></a></th>
<th style="text-align: left"><a href="">BELLE TIRE</a></th>
<th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
</tr>
</tbody>
</table>
</article>
</section>
<section id="section2">
<input type="radio" name="sections" id="option2">
<label for="option2">ALASKA</label>
<article>
<table class="tg">
<tbody>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="ASHA - Alaska" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/ASHA1_zpszceufh7t.jpg" title="ASHA - Alaska" /></a></th>
<th style="text-align: left"><a href="" title="ASHA - Alaska"><span style="color: #696969">ALASKA STATE HOCKEY ASSOCIATION</span></a></th>
<th><a href="mailto:darrylthompson@akdltlaw.com" target="_top"><img alt="Contact ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact ASHA" /></a></th>
<th><a href="" target="_blank"><img alt="Like ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like ASHA" /></a></th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="Alaska All Stars - Anchorage, AK" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Team%20Logos/AlaskaAllStarsLogo_zpszqtsgye2.png" title="Alaska All Stars - Anchorage, AK" /></a></th>
<th style="text-align: left"><a href="" title="Alaska All Stars - Anchorage, AK"><span style="color: #696969">ALASKA ALL STARS</span></a></th>
<th><a href="mailto:akallstar_ice@hotmail.com" target="_top"><img alt="Contact Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska All Stars" /></a></th>
<th><a href="" target="_blank"><img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" /></a></th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AlaskaBlueDevilsLogo_zpsldn65akh.png"
height="80" alt="Alaska Blue Devils - Eagle River, AK" title="Alaska Blue Devils - Eagle River, AK"/></a></th>
<th style="text-align: left"><a href="" title="Alaska Blue Devils - Eagle River, AK">ALASKA BLUE DEVILS</a></th>
<th><a href="mailto:mlaflamme@gci.net" target="_top"><img alt="Contact Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska Blue Devils" /></a></th>
<th><a href="" target="_blank"><img alt="Like Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska Blue Devils" /></a></th>
<th></th>
<th></th>
</tr>
</tbody>
</table>
</article>
</section>
<section id="section3">
<input type="radio" name="sections" id="option3">
<label for="option3">ARIZONA</label>
<article>
<table>
<tbody>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="Airdrie Lightning - Airdrie, AB" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AirdrieLightningLogo_zpsciougcnu.png" title="Airdrie Lightning - Airdrie, AB" /></a></th>
<th style="text-align: left"><a href="">AIRDRIE LIGHTNING</a></th>
<th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
</tr>
<tr>
<th class="tg-yw4l"><a href="" target="_blank"><img alt="Calgary Buffaloes - Calgary, AB" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/CalgaryBuffaloesLogo_zpsbinsmcud.png" title="Calgary Buffaloes - Calgary, AB" /></a></th>
<th style="text-align: left"><a href="">CALGARY BUFFALOES</a></th>
<th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
<th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
</tr>
</tbody>
</table>
</article>
</section>
<section id="section4">
<input type="radio" name="sections" id="option4">
<label for="option4">ARKANSAS</label>
<article>
</article>
</section>
</div>