Pure CSS Dropdown Menus (with Transitions) (Part 2: Drawers)

I promised two years ago CSS3 drawers.  Back when I did this originally, I was bleeding edge—no one had done this yet with just CSS that I had seen.

Since then, I've been scooped.   But that's what happens when it takes you two and half years to post some code. ☺

Here's the demo, and the code is below. (HTML is the same as the previous post.  Also like the previous post, I'm lazy so this only works in Webkit.)
body {
    margin: 0;
}
.nav {
    margin: 0;
    padding: 0;
    background-color: rgb(101,101,101);
    color: white;
}
.nav li {
    display: inline-block;
    font-weight: bold;
}
.nav li.parent {
    position: relative;
}
.nav li.parent,
.nav a {
    padding: .5em 1em;
    color: white;
}
.nav li.parent:hover {
    background-color: rgb(80,80,80);
}
.nav a:hover {
    background-color: rgba(0,0,0,.2);
}
.nav a {
    display: block;
}
.nav li.parent ul {
    position: absolute;
    top: -500%; /* must be at least as tall the submenu itself */
    left: 0;
    z-index: -1; /* sets the submenu behind the main menu */
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(101,101,101);
    -webkit-transition: top 0.25s linear;
}
.nav li.parent:hover ul {
    top: 100%;
}
.nav li.parent ul li {
    width: 100%;
}

Something worth noting here is that, unlike the previous examples, this one does not use translucent colors.  That's because the submenu drops down from behind the top level.  If I used translucent colors, you can see it, which could be a cool effect in some fairly specific circumstances (maybe with the fancy new blur filter?), but not desirable in most situations.

This is definitely the way to go in terms of menu animation.  It's smooth, it stems naturally from the main menu, and it's a well-known paradigm.