css for a 3 level menu cant hide third level - css

Question

Please could someone help me. I am trying to figure out why the third level menu isn't hiding.
Thanks for your help. The url is below:
http://www.aimsmediatesting.co.uk/solar/SF/SF/
<nav class="relative sixteen columns">
<ul>
<li> Home </li>
<li> About us </li>
<li> Solar PV
<ul>
<li>Benefits of Solar Panels</li>
<li> How Solar Panels Work
<ul>
<li> Feed in Tariffs </li>
<li> How Panels are installed </li>
</ul>
</li>
<li>Why Choose Us</a></li>
<li>Insurance Backed Guarantee</a></li>
</ul>
</li>
<li> ThermoDynamic </li>
</li>
<li> Solar Thermal </li>
</li>
<li> Energy Saver Optimiser </li>
</li>
<li> Testimonials
<ul>
<li> Michael Muller </li>
<li> Gordon Porter </li>
<li> Thomas Hagan </li>
<li> John MacBean </li>
<li> Cameron CS </li>
<li> Installation Map </li>
</ul>
</li>
</ul>
</nav>
MY CSS
nav{
width:100%;
background: #118542;
display:block;
height:45px;
}
nav ul{
display:inline;
}
nav li{
float:left;
padding: 12px;
}
nav li a{
color:#fff!important;
padding:5px;
font-size:14px;
font-weight:bold;
}
nav li a{
color:#fff!important;
}
nav ul ul{
display:none;
}
nav li:hover > ul a {
background: #58595b;
padding-top: 10px;
color: #FFFFFF;
text-decoration: none;
}
nav li:hover > ul {
background: #58595b;
padding-top: 10px;
color: #FFFFFF;
text-decoration: none;
}
nav li > ul > li:hover > ul {
left: 180px;
position: absolute !important;
top: 0;
}
nav li li{
position:relative;
}
nav li li ul{
display:none;
}
nav li li ul:hover{
display:block;
position:absolute;
top:0;
left:100%;
}
nav li a:hover {
padding-top:10px;
color:#fff!important;
padding-bottom:10px;
}
nav li ul {
display:none;
height:auto;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
nav li:hover ul {
display:block;
}
nav li ul {
top: 34px;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
nav li:hover ul {
display:block;
}
nav li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
background:#58595b;/*this is where the rounded corners for the dropdown disappears*/
}
nav li:hover li a {
background:none;
}
nav ul li:hover a {
background:#58595b;
padding-top:10px;
color:#FFFFFF;
text-decoration:none;
}
nav li ul a {
display: block;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 10px 10px 10px 15px;
text-align: left;
}
If anyone could help me figure out what class I need to add or change I would be really grateful for your help.
Thanks

Answer 1

This happens due to the nav li:hover ul{display:block;} rule. it will enable all levels of submenus once a top level item is hovered..
Change it to affect only immediate children (and not descendants)
nav li:hover > ul{
display:block;
}
(also you have that rule twice in your code, so remove one of the two instances)