CSS-Menü Übergang

JSFiddle: http://jsfiddle.net/x6bM3/

Wenn Sie den Mauszeiger über die Produkte, die link, den Sie sehen, habe ich eine drop-down-Effekt, aber was ich versuche zu tun, ist geben Sie ihm einen schönen übergang statt es nur zu erscheinen.
Ich habe versucht, mit Hilfe von :hover mit css-übergängen auf die verschiedenen Teile des Menüs, aber nach der Erforschung es ich merkte, dass die animation nicht funktionieren, mit display: none; auf ihm. Bitte helfen Sie,

Vielen Dank im Voraus,
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><a href="index.php">home</a>
        </li>
        <li><a href="index.php">products</a>

            <ul>
                <li><a href="#">product 1</a>
                </li>
                <li><a href="#">product 2</a>
                </li>
            </ul>
        </li>
        <li><a href="index.php">solutions</a>
        </li>
    </ul>
</nav>

InformationsquelleAutor Awilson089 | 2013-02-11

Kann ich im detail erklären, aber diese person hat eine große Aufgabe: 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;
}