Fading Drop Down CSS from Image - html

Question

I've followed a few tutorials and fiddled with it to create a drop down menu come out from the website's logo.
This all works perfectly as I aimed for it to. To add effect I'd like to be able to have the menu items calmly fade in instead of just bam there.
I've tried to follow tutorials but I think I've butchered the CSS list enough that it's hard to put in place.
I need to logo to be the parent link which when hovered over drops down the options and not have it's shape, padding, boarders etc. effected by the li class so I created the sub class to prevent that.
Here's the HTML in question.
<nav>
<ul>
<li><div id="logo"><img src="images/logo.png" width="318" height="85" alt="Logo of Website"/></div>
<ul>
<li class="sub"> Much
</li>
<li class="sub"> Navigation
</li>
<li class="sub"> Very
</li>
<li class="sub"> Links
</li>
<li class="sub"> Wow
</li>
</ul>
</li>
</ul>
</nav>
And my mess of a Stylesheet
li {
list-style:none !important;
}
.sub {
padding:5px;
width:300px;
margin-bottom:1px;
border:rgba(0, 0, 0, 0.2);
height:20px;
vertical-align:central;
}
nav ul {
padding:0;
margin:0;
}
nav ul li {
list-style: none;
float:left;
background-color:rgba(0, 0, 0, 0.5);
}
nav ul li a {
text-decoration:none;
color:white;
font-family:'Merriweather', Baskerville, "Century Schoolbook L", "Times New Roman", serif;
font-weight:300;
color:white;
font-size:0.9em;
}
li a:hover {
font-style:italic;
word-spacing:3px;
height:20px;
}
nav ul li ul {
display:none;
}
nav ul li:hover ul {
z-index:5;
display:list-item !important;
position:absolute;
margin-top:90px;
}
nav ul li:hover ul li {
float:none;
}
And a JSFiddle link which shows you a box which is the logo and when you hover over it the menu appears below it... I'm aiming to get that menu list to fade into existence and not just jump out behind the logo.
JSFiddle

Answer 1

Try CSS3 transitions if you don't want to use jQuery. I think your markup may need some rewriting, but try for example:
transition:All 1s linear;
-webkit-transition:All 1s linear;
-moz-transition:All 1s linear;
-o-transition:All 1s linear;