Responsiv menu problem

Hey, jeg er igang med at lave en responsiv menu, som NÆSTEN virker.
http://dreamkiwi.com/menu.html

Du skal gøre dit vindue småt (mindre end 700px bred) for at den menu jeg snakker om, kommer frem.

På selve ul-elementet har jeg gjort sådan, at når skærmstørrelsen er mindre end 700px, har den en max-height:0;
Altså, den er ikke synlig.

Når man så klikker på menu-knappen for at vise den, kører der noget jQuery, som giver ul-elementet en class der hedder .showing

I showing er max-height:16em;

ul-elementet får klassen tildelt, men den bruger ikke max-height:16em; som den burde.

Nogle der hurtigt kan hjælpe mig? I kan inspicere elementet for at se tilhørende CSS :)