Ok another wall.. I just seem to be hitting them all lately, but at least I am learning. This time I have made two dropdown menus. When one checkbox from the first menu is checked, a list of choice in the second should become visable. I have been trying a lot of the suggestion on the forum. Sorry if the code is messy I am so novice its not funny. If you do see anything that you think can be cleaned or made less messy please let me know. <table>
<tr>
<td>
<td class='sheet-bckgnddrop'>
<div class="sheet-occ-dropdown">
<button class="sheet-occ-dropbtn"><span class='sheet-buttext'>Occupation</span></button>
<div class="sheet-occ-dropdown-content">
<a href="#">
<input type='checkbox' class='sheet-occ1'>Survivor</a>
<br>
<a href="#">
<input type='checkbox' class='sheet-occ2'>Tradie</a>
<br>
<a href="#">
<input type='checkbox' class='sheet-occ3'>Store Owner</a>
<br>
<a href="#">
<input type='checkbox' class='sheet-occ4'>Professional</a>
<br>
<a href="#">
<input type='checkbox' class='sheet-occ5'>Emergency Services</a>
<br>
<a href="#">
<input type='checkbox' class='sheet-occ6'>Militray</a>
</div>
</div>
<div class="sheet-arc-dropdown">
<button class="sheet-arc-dropbtn"><span class='sheet-butttext'>Archtype</span></button>
<div class="sheet-arc-dropdown-content">
<div class='archdivider'>
<a href="#">
<input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Scout</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Student</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Athlete</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Biker</span></a>
<br>
</div>
<div class='archdivider1'>
<a href="#">
<input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Carpenter</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Butcher</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Mechanic</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Sparkie</span></a>
<br>
</div>
<div class='archdivider2'>
<a href="#">
<input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Car Yard</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Gun Store</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Warehouse</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Super Market</span></a>
<br>
</div>
<div class='archdivider3'>
<a href="#">
<input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Chemist</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Fisherman</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Rangee</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Security Guard</span></a>
<br>
</div>
<div class='archdivider4'>
<a href="#">
<input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Fireman</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Paramedic</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Police Officer</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Riot Squad</span></a>
<br>
</div>
<div class='archdivider5'>
<a href="#">
<input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Army</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Navy</a><br>
<a href="#"><input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Airfoce</span></a>
<br>
<a href="#">
<input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Veteran</span></a>
<br>
</div>
</div>
</div>
</td>
</tr>
</table>
.sheet-occ-dropbtn {
box-shadow: 0 0 5px 1px #DADADA background-color: #DADADA;
color: black;
padding: 2px;
font-size: 9.5px;
border: 1px solid black;
cursor: pointer;
width: 9em;
height: 27px;
}
/* The container <div> - needed to position the dropdown content */
.sheet-occ-dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.sheet-occ-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.sheet-occ-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
float: left;
display: inline-block;
}
/* Change color of dropdown links on hover */
.sheet-occ-dropdown-content a:hover {
background-color: #A9A9A9
}
/* Show the dropdown menu on hover */
.sheet-occ-dropdown:hover .sheet-occ-dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.sheet-occ-dropdown:hover .sheet-occ-dropbtn {
background-color: #A9A9A9;
}
.sheet-arc-dropbtn {
box-shadow: 0 0 5px 1px #DADADA background-color: #DADADA;
color: black;
padding: 2px;
font-size: 9.5px;
border: 1px solid black;
cursor: pointer;
width: 9em;
height: 27px;
}
/* The container <div> - needed to position the dropdown content */
.sheet-arc-dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.sheet-arc-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.sheet-arc-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
float: left;
display: inline-block;
margin: 10px;
}
/* Change color of dropdown links on hover */
.sheet-arc-dropdown-content a:hover {
background-color: #A9A9A9
}
/* Show the dropdown menu on hover */
.sheet-arc-dropdown:hover .sheet-arc-dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.sheet-arc-dropdown:hover .sheet-arc-dropbtn {
background-color: #A9A9A9;
}
/*hide and display archtypes dependent on occupation*/
div.sheet-archdivider,
div.sheet-archdivider1,
div.sheet-archdivider2,
div.sheet-archdivider3,
div.sheet-archdivider4,
div.sheet-archdivider5 {
display: none;
}
input[value='1']:checked ~ div.sheetarchdivider {
display: inline;
}
