Drop down menu text shows before background - html

Question

So i made a menu with a drop down effect with the css3 transition, but my problem is that you can actually see the text before the background is showing, of course the idea is not to see the text before the background.
I have made a jsfiddle
Html:
<nav>
<ul>
<li>Home</li>
<li>Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background: #30a0ff;
z-index: 2;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
nav > ul {
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
nav > ul > li {
position: relative;
display: inline;
padding: 12px 20px;
line-height: 50px;
font-size: 22px;
color: #fff;
cursor: pointer;
}
nav > ul > li:last-child {
margin: 0 -20px 0 0;
}
nav ul li {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav ul li:hover {
background-color: #0f71c4;
}
nav > ul > li > ul {
position: absolute;
top: 50px;
left: 0;
height: 0;
padding: 0;
list-style: none;
line-height: 20px;
font-size: 17px;
background-color: #30a0ff;
overflow: hidden;
}
nav > ul > li:hover > ul {
min-height: 110px;
overflow: visible;
}
nav > ul > li > ul > li:first-child {
padding: 15px 20px 5px 20px;
}
nav > ul > li > ul > li:last-child {
padding: 5px 20px 15px 20px;
}
nav > ul > li > ul > li {
position: relative;
padding: 5px 20px;
min-width: 150px;
text-align: left;
}
nav ul li ul {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
nav > ul > li > ul > li > ul {
position: absolute;
left: 190px;
top: 0;
padding: 0;
width: 0;
list-style: none;
font-size: 16px;
background-color: #30a0ff;
overflow: hidden;
}
nav > ul > li > ul > li:hover > ul {
min-width: 150px;
}
nav > ul > li > ul > li > ul > li {
position: relative;
padding: 5px 20px;
min-width: 150px;
}
nav > ul > li > ul > li > ul > li:first-child {
padding: 15px 20px 5px 20px;
}
nav > ul > li > ul > li > ul > li:last-child {
padding: 5px 20px 15px 20px;
}

Answer 1

I just added the opacity to the existing css:
js fiddle:
http://jsfiddle.net/r9Dyq/2/
css:
nav > ul > li > ul {
position: absolute;
top: 50px;
left: 0;
height: 0;
padding: 0;
list-style: none;
line-height: 20px;
font-size: 17px;
background-color: #30a0ff;
overflow: hidden;
opacity:0; /*newly added */
}
nav > ul > li:hover > ul {
min-height: 110px;
overflow: visible;
opacity:1; /*newly added */
}

Answer 2

Just don't change the overflow property:
nav > ul > li:hover > ul {
min-height: 110px;
/*overflow: visible; Remove this*/
}
Check this http://jsfiddle.net/r9Dyq/1/