Unable to get menu to expand with expanding submenu - html

Question

I'm having a difficult time getting an expanding menu to work. I have a need to have a menu that has items that has sub menu items. We don't want the sub menu items to always be displayed. The approach I want to use is to have and arrow (analogous to a + sign) to the left of the menu items that have sub menu items. I want the user to be able to select the arrow to display the sub menu items. The arrow will change direction (analogous to a - sign). My issue is not in getting the arrow and sub menus to show. My issue is in expanding the upper level div to show the sub menu items. (see sample)
#navigation_slideout {
position: fixed;
top: 85px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul {
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: 325px;
height: 30px;
text-align: left;
padding-top: 5px;
font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12pt;
color: white;
font-weight: bold;
}
#navigation_slideout ul li a {
color: #000;
text-decoration: none;
font-weight: bold;
display: block;
background-color: #548EBE;
color: white;
}
#navigation_slideout ul li ul {
width: 285px;
}
#navigation_slideout ul li ul li {
width: 10px;
position: relative;
left: -41px;
}
#navigation_slideout ul li ul li a {
background: #548EBE;
width: 326px;
height: 30px;
text-align: left;
padding-top: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color: white;
font-weight: bold;
}
#menu {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14pt;
color: white;
font-weight: bold;
margin: 0px 0px 0px 0px;
right: 0px;
padding: 0px 0px 0px 0px
}
#menu a {
font-size: 14pt;
color: white;
font-weight: bold;
text-decoration: none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th,
td {
padding: 0;
}
.menu-col {
max-width: 30px;
}
.expanding25 label {
/*background-color: #AAAFAB;
border-radius: 5px;
color: white;
*/
padding: 3px;
padding-left: 25px;
}
.expanding25 li {
margin: 2px 2px 2px 0;
padding: 5px;
}
.expanding25 li > ul {
left: -35px;
position: relative;
width: 100%
}
.expanding25 input[type=checkbox] {
display: none;
}
.expanding25 input[type=checkbox] ~ ul {
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.expanding25 input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.expanding25 input[type=checkbox] + label:before {
transform-origin: 25% 50%;
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin-left: -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
color: #AAAFAB;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
position: absolute;
margin-top: 1px;
}
.expanding25 input[type=checkbox]:checked + label:before {
transform: rotate(90deg);
/*margin-top: 6px;
margin-left: -25px;*/
}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" onclick="">
<table class="nospacing" style="border-style:none">
<tr>
<td>
<ul>
<li> Title</li>
<li> Home
</li>
<li> About
</li>
<li> Contacts
</li>
<li> FAQs
</li>
<li class="expanding25">
<input class="expanding25" type="checkbox" id="cb28" />
<label class="expanding25" for="cb28">Topic Areas</label>
<ul class="expanding25">
<li class="expanding25">
<label class="expanding25">Topic 1</label>Content</li>
<li class="expanding25">
<label class="expanding25">Topic 2</label>Content</li>
<li class="expanding25">
<label class="expanding25">Topic 3</label>Content</li>
<li class="expanding25">
<label class="expanding25">Topic 4</label>Content</li>
</ul>
</li>
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="menu">MENU</p>
</td>
</tr>
</table>
</div>

Answer 1

All #navigation_slideout ul li are getting height: 30px, so your submenu is inside an li that can’t grow tall enough to show it. Adding this style will fix it:
#navigation_slideout ul li.expanding25 { height: auto }
Sample.