Botonera con animación en css3

Bueno les traigo este tutorial para hacer una super botonera en css

Codigo HTML:
<div id="botonera">
<ul class="nav">
    <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Productos</a>
        <ul>
            <li><a href="#">Monitores</a></li>
                <li><a href="#">PC</a></li>
                <li><a href="#">Juegos</a></li>    
            </ul>
   
        </li>    
        <li><a href="#">Contacto</a></li>
    </ul>

</div>

Codigo CSS:

* {
padding:0px;
margin:0px;

}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
#botonera {
margin:auto;
width:395px;

background-color:#000;
text-align:center;

}

ul, ol{
list-style:none;
}

.nav li a {
background-color:#333;
color:#FFF;
text-decoration:none;
display:block;
padding:10px 20px;
-webkit-transition:background-color .8s;
-ms-transition:background-color .8s;
-moz-transition:background-color .8s;
-o-transition:background-color .8s;


}

.nav li a:hover {
background-color:#0FF;
color:#000;
}

.nav > li {
float:left;
}
.nav li ul {
height:0;
    overflow:hidden;
-moz-transition-duration:.8s;
    -webkit-transition-duration:.8s;
    -o-transition-duration:.8s;
    transition-duration:.8s;
}
.nav li ul li a{
border-radius:5px 5px 5px 5px;

}

.nav li:hover > ul{
height:17em;


}