CSS Menu Transition - css

Question

JSFiddle: http://jsfiddle.net/x6bM3/
If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing.
I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help,
Thanks in advance,
Adam
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin-top: 23px;
padding: 0;
float: left;
}
nav ul:after {
content:"";
display: block;
}
nav ul li {
float: left;
height: 50px;
width: auto;
padding: 5px;
margin-left: 22px;
}
nav ul li a {
display: block;
text-decoration: none;
}
nav ul ul {
background: #363c43;
border-radius: 3px;
border: 1px solid #2e363f;
padding: 7px;
position: absolute;
font-size: 0.9em;
}
nav ul ul:before {
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom:10px solid #363c43;
top:-8px;
left: 30px;
}
nav ul ul li {
height: 30px;
float: none;
position: relative;
padding: 0px 0px 5px 0px;
margin: 0px;
}
/* Other base styles */
* {
font-family: arial;
}
a:link, a:visited {
color: #979797;
font-size: 1.145em;
/* 18px */
text-decoration: none;
font-weight: lighter;
-webkit-transition: all .25s linear;
transition: color .25s linear;
}
a:hover {
color: #c4c1c1;
font-size: 1.145em;
/* 22px */
text-decoration: none;
}
HTML:
<nav>
<ul class="menu">
<li>home
</li>
<li>products
<ul>
<li>product 1
</li>
<li>product 2
</li>
</ul>
</li>
<li>solutions
</li>
</ul>
</nav>

Answer 1

I can explain in detail, but this person does a great job: https://stackoverflow.com/a/3332179/363605
nav ul ul {
display: block;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0;
height: 0;
overflow: hidden;
}
nav ul li:hover > ul {
height: auto;
opacity: 1;
}
http://jsfiddle.net/pYhrk/