Multi Drop Down Vertical Menu - html

Question

I have a vertical drop down menu that has three levels. I cannot seem to get the third drop down to be hidden until it is hovered. Any suggestions? I know I'm missing something simple, but I can't seem to figure it out.
Here is the HTML:
<li class="family">Family Matters
<ul class="familyhover">
<li class="familyhover">Adoptions</li>
<li class="familyhover">Custody/Proceedings
<ul class="familyhover">
<li class="familyhover">Child Custody Proceedings</li>
</ul></li>
<li class="familyhover">Protective Proceedings
<ul class="familyhover">
<li class="familyhover">Child Protective Proceedings</li>
</ul></li>
<li class="familyhover">Deceased Estates
<ul class="familyhover">
<li class="familyhover">Informal Probate</li>
<li class="familyhover">Small Estates</li>
<li class="familyhover">Affidavit of Successor</li>
</ul></li>
<li class="familyhover">Divorces
<ul class="familyhover">
<li class="familyhover">With Children</li>
<li class="familyhover">Without Children</li>
</ul></li>
<li class="familyhover">Fines & Fees
<ul class="familyhover">
<li class="familyhover">Circuit Court</li>
<li class="familyhover">Circuit Ct. - Family Div.</li>
<li class="familyhover">Probate Court</li>
</ul></li>
<li class="familyhover">Friend of the Court</li>
<li class="familyhover">Guardian/Conservator
<ul class="familyhover">
<li class="familyhover">Adult Guardian
<ul class="familyhover">
<li class="familyhover">Adult Guardianship</li>
</ul></li>
<li class="familyhover">Minor Guardian
<ul class="familyhover">
<li class="familyhover">Minor Guardianship</li>
</ul></li>
<li class="familyhover">Disabled Guardian
<ul class="familyhover">
<li class="familyhover">Dev. Disabled Guardianship</li>
</ul></li>
<li class="familyhover">Adult Conservator</li>
</ul></li>
<li class="familyhover">Juvenile Delinquency</li>
</ul></li>
Here is the CSS:
/* Sidebar Styles */
.side-bar {
background-color:rgba(255,255,255,0.6);
float:left;
}
/*main menu*/
.side-bar ul {
padding: 5px;
}
.side-bar ul li a {
color: #000;
font-size:15px;
width:225px;
padding-top: 10px;
padding-bottom: 15px;
display:block;
text-decoration:none;
}
.side-bar ul li a:hover {
text-decoration: none;
}
.side-bar ul li:hover ul {
background-color: #FFF;
display: block;
margin-left: 150px;
margin-top: -45px;
border-radius: 5px;
}
/*first drop*/
.side-bar ul ul {
position: absolute;
margin-left: 100px;
display: none;
z-index:1;
text-align: center;
padding:0;
}
/*first drop hover*/
.side-bar li:hover ul ul {
display:none;
}
/*second drop hover*/
.side-bar li ul li:hover ul {
display:block;
margin-top:-42px;
margin-left: 210px;
z-index:1;
text-align: center;
}
.sidebar > li.family:hover {
border-top: 3px solid #1A7208;
margin-top:-3px;
}
/*To change main nav 1st drop level background and link color for "FAMILY"*/
.sidebar > li.family ul.familyhover {
background-color:#FFF;
border-radius: 5px;
color:#FFFFFF;
}
/*User hovers over main nav 2nd drop level link menu for "FAMILY"*/
.sidebar > li.family ul.familyhover li.familyhover a:hover {
background-color:#1A7208;
border-radius: 5px;
color: #FFFFFF;
}
/*User hovers over main nav 3rd drop level link menu for "FAMILY"*/
.sidebar > li.family ul.familyhover li.familyhover ul.familyhover a:hover {
background-color:#1A7208;
border-radius: 5px;
color: #FFFFFF;
}
/*User hovers over main nav 4th drop level link menu for "FAMILY"*/
.sidebar > li.family ul.familyhover li.familyhover ul.familyhover a:hover {
background-color:#1A7208;
border-radius: 5px;
color: #FFFFFF;
}
And here is the JSFiddle: https://jsfiddle.net/yv4ogdcg/
I only posted the portion of the code that I need help on. The JSFiddle has the entire sidebar code. Any help is greatly appreciated.