CSS3 showcase: dropdown menu scale + translate effect (consecutive)

This is a part of the tutorial "CSS3 showcase: dropdown menu revisited", for more information please visit mechdeveloper.com

by Miguel RodrĂ­guez

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<ul class="menu">
    <li>
    <a title="option 1"> option 1</a>
    </li>
    <li>
    <a title="option 2"> option 2</a>
    <ul>
        <li>
        <a title="option 1">option 1</a>
        </li>
        <li>
        <a title="option 2">option 2</a>
        <ul>
            <li>
            <a title="option 1">option 1</a>
            </li>
            <li>
            <a title="option 2">option 2</a>
            </li>
            <li>
            <a title="option N">option N</a>
            </li>
        </ul>
        </li>
        <li>
        <a title="option 3">option 3</a>
        </li>
        <li>
        <a title="option 4">option 4</a>
        </li>
        <li>
        <a title="option 5">option 5</a>
        </li>
        <li>
        <a title="option 6">option 6</a>
        </li>
        <li>
        <a title="option 7">option 7</a>
        </li>
        <li>
        <a title="option N">option N</a>
        </li>
    </ul>
    </li>
    <li>
    <a title="option N"> option N</a>
    </li>
</ul>

CSS

/*begin buttons style*/
ul.menu a{
display:block;
text-decoration:none;
}
 
input[type=submit], button, ul.menu a{
width:8em;
text-align:center;
height:1.8em;
line-height:1.8em;
background-color:blue;
font-size:1em;
color:black;
}
 
.borderradius input[type=submit], .borderradius button, .borderradius ul.menu a{
border-radius:3px !important;
}
 
.boxshadow input[type=submit], .boxshadow button, .boxshadow ul.menu a{
box-shadow: -1px 1px 6px rgba(0,0,0,0.5), 2px -2px 2px 0px rgba(0,0,0,0.5) inset, -2px 2px 2px 0px rgba(255,255,255,0.5) inset;
-o-box-shadow: -1px 1px 6px rgba(0,0,0,0.5), 2px -2px 2px 0px rgba(0,0,0,0.5) inset, -2px 2px 2px 0px rgba(255,255,255,0.5) inset;
-ms-box-shadow: -1px 1px 6px rgba(0,0,0,0.5), 2px -2px 2px 0px rgba(0,0,0,0.5) inset, -2px 2px 2px 0px rgba(255,255,255,0.5) inset;
-moz-box-shadow: -1px 1px 6px rgba(0,0,0,0.5), 2px -2px 2px 0px rgba(0,0,0,0.5) inset, -2px 2px 2px 0px rgba(255,255,255,0.5) inset;
-webkit-box-shadow: -1px 1px 6px rgba(0,0,0,0.5), 2px -2px 2px 0px rgba(0,0,0,0.5) inset, -2px 2px 2px 0px rgba(255,255,255,0.5) inset;
}
 
.no-boxshadow input[type=submit], .no-boxshadow button, .no-boxshadow ul.menu a{
border-top: solid 1px #8888FA;
border-left: solid 1px #0000A1;
border-right: solid 1px #8888FA;
border-bottom: solid 1px #0000A1;
}
 
.boxshadow input[type=submit]:active, .boxshadow button:active, .boxshadow ul.menu a:active{
line-height:2em;
box-shadow: 0px 0px 0px rgba(0,0,0,0.6), -2px 2px 2px 0px rgba(0,0,0,0.5) inset, 2px -2px 2px 0px rgba(255,255,255,0.5) inset;
-o-box-shadow: 0px 0px 0px rgba(0,0,0,0.6), -2px 2px 2px 0px rgba(0,0,0,0.5) inset, 2px -2px 2px 0px rgba(255,255,255,0.5) inset;
-ms-box-shadow: 0px 0px 0px rgba(0,0,0,0.6), -2px 2px 2px 0px rgba(0,0,0,0.5) inset, 2px -2px 2px 0px rgba(255,255,255,0.5) inset;
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.6), -2px 2px 2px 0px rgba(0,0,0,0.5) inset, 2px -2px 2px 0px rgba(255,255,255,0.5) inset;
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.6), -2px 2px 2px 0px...