我有一个垂直下拉菜单，有三个级别。我似乎无法将第三个下降隐藏起来直到它被徘徊。有什么建议？我知道我错过了一些简单的东西，但我似乎无法弄明白。
这是HTML：
<li class="family"><a href="#">Family Matters</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Adoptions</a></li>
<li class="familyhover"><a href="#">Custody/Proceedings</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Child Custody Proceedings</a></li>
</ul></li>
<li class="familyhover"><a href="#">Protective Proceedings</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Child Protective Proceedings</a></li>
</ul></li>
<li class="familyhover"><a href="#">Deceased Estates</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Informal Probate</a></li>
<li class="familyhover"><a href="#">Small Estates</a></li>
<li class="familyhover"><a href="#">Affidavit of Successor</a></li>
</ul></li>
<li class="familyhover"><a href="#">Divorces</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">With Children</a></li>
<li class="familyhover"><a href="#">Without Children</a></li>
</ul></li>
<li class="familyhover"><a href="#">Fines & Fees</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Circuit Court</a></li>
<li class="familyhover"><a href="#">Circuit Ct. - Family Div.</a></li>
<li class="familyhover"><a href="#">Probate Court</a></li>
</ul></li>
<li class="familyhover"><a href="#">Friend of the Court</a></li>
<li class="familyhover"><a href="#">Guardian/Conservator</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Adult Guardian</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Adult Guardianship</a></li>
</ul></li>
<li class="familyhover"><a href="#">Minor Guardian</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Minor Guardianship</a></li>
</ul></li>
<li class="familyhover"><a href="#">Disabled Guardian</a>
<ul class="familyhover">
<li class="familyhover"><a href="#">Dev. Disabled Guardianship</a></li>
</ul></li>
<li class="familyhover"><a href="#">Adult Conservator</a></li>
</ul></li>
<li class="familyhover"><a href="#">Juvenile Delinquency</a></li>
</ul></li>
这是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;
}
这是JSFiddle：https://jsfiddle.net/yv4ogdcg/
我只发布了我需要帮助的部分代码。 JSFiddle有完整的侧边栏代码。非常感谢任何帮助。