Nested Menu CSS Hover Fade - html

Question

I modified this menu and added css opacity hover transition.
It only works on the first ul, but the nested sub ul's will not show.
https://jsfiddle.net/sh73vvgf/
Replacing the fade effect with display: none; will show the sub menus.
https://jsfiddle.net/v8op2tqv/
How can I get fade to work on the sub menus? I need it to be pure html/css.
HTML
This nested menu shows a list of Planets and their Moons.
<div class="nav-main">
<ul>
<li>
Planets
<ul>
<li>
Jupiter
<!-- Moons -->
<ul>
<li>
Europa
</li>
<li>
Ganymede
</li>
<li>
Callisto
</li>
</ul>
</li>
<li>
Saturn
<!-- Moons -->
<ul>
<li>
Mimas
</li>
<li>
Dione
</li>
<li>
Titan
</li>
</ul>
</li>
<li>
Uranus
<!-- Moons -->
<ul>
<li>
Umbriel
</li>
<li>
Ariel
</li>
<li>
Oberon
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.nav-main ul {
cursor: default;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
position: relative;
width: 300px;
padding: 0;
margin: 0;
background: #000;
font-size: 1em;
color: #fff;
list-style: none;
}
.nav-main ul li {
display: block;
position: relative;
float: left;
min-width: 25%;
padding: 0.3em;
min-width: 100px;
}
.nav-main ul li a {
display: block;
padding: 1.2em;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #fff;
}
/* Hover Fade */
.nav-main li ul {
webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out;
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
}
.nav-main li:hover > ul {
display: block;
position: absolute;
opacity: 1;
height: auto;
width: auto;
}
.nav-main li:hover li {
float: none;
}
.nav-main ul ul ul {
left: 100%;
top: 0;
}
.nav-main ul:before,
.nav-main ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.nav-main ul:after {
clear: both;
}

Answer 1

I changed some "overflow" style of your code.
.nav-main ul {
cursor: default;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
position: relative;
width: 300px;
padding: 0;
margin: 0;
background: #000;
font-size: 1em;
color: #fff;
list-style: none;
overflow:hidden;
}
.nav-main ul:hover {
overflow:visible;
}
.nav-main ul li {
display: block;
position: relative;
float: left;
min-width: 25%;
padding: 0.3em;
min-width: 100px;
}
.nav-main ul li a {
display: block;
padding: 1.2em;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #fff;
}
/* Hover Fade */
.nav-main li ul {
webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out;
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
opacity: 0;
height: 0;
width: 0;
//overflow: hidden;
}
.nav-main li:hover > ul {
display: block;
position: absolute;
opacity: 1;
height: auto;
width: auto;
}
.nav-main li:hover li {
float: none;
}
.nav-main ul ul ul {
left: 100%;
top: 0;
}
.nav-main ul:before,
.nav-main ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.nav-main ul:after {
clear: both;
}
<div class="nav-main">
<ul>
<li>
Planets
<ul>
<li>
Jupiter
<!-- Moons -->
<ul>
<li>
Europa
</li>
<li>
Ganymede
</li>
<li>
Callisto
</li>
</ul>
</li>
<li>
Saturn
<!-- Moons -->
<ul>
<li>
Mimas
</li>
<li>
Dione
</li>
<li>
Titan
</li>
</ul>
</li>
<li>
Uranus
<!-- Moons -->
<ul>
<li>
Umbriel
</li>
<li>
Ariel
</li>
<li>
Oberon
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>