CSS and jQuery issues with height of drop down menus

So I've made some drop down menus. The drop downs are ul nested in li. For style reasons I need have the drop down height set to 0px with some padding when the page first loads. All my drop downs have different heights. When I put 100% in as the height to animate too, it does not work.

Here is a link: http://www.jasonfoumberg.com/test/writing.html

How do I get the drop downs to animate to the proper height. Each drop down has a different number of items.

jQuery

$(document).ready(function () {
     var defHeight = $('ul:first', this).height();
     console.log(defHeight);
 
     $("ul li").hover(
 
     function () {
 
         $('ul:first', this).animate({
             height: "100%"
         });
     }, function () {
         $('ul:first', this).animate({
             height: "0px"
         });
     });
 });?
 

HTML

<div id="mainWrapperContent">
     <div id="writingMenu">
             <ul>
             <li><a href="">critical reviews</a>
                 <ul>
                     <li><a href="">frieze</a></li>
                     <li><a href="">Modern Painters</a></li>
                     <li><a href="">photograph</a></li>
                     <li><a href="">sculpture</a></li>
                     <li><a href="">NewCity</a></li>
                 </ul>                
             </li>
             <li><a href="">Exhibition Catalogs</a>
                 <ul>
                     <li><a href="">Catalog One</a></li>
                     <li><a href="">Catalog Two</a></li>
                     <li><a href="">Catalog Three</a></li>
                     <li><a href="">Catalog Four</a></li>
                     <li><a href="">Catalog Five</a></li>
                 </ul>                
             </li>
             <li><a href="">BreakOut Artists</a>
                 <ul>
                     <li><a href="">2012</a></li>
                     <li><a href="">2011</a></li>
                     <li><a href="">2010</a></li>
                     <li><a href="">2009</a></li>
                     <li><a href="">2008</a></li>
                 </ul>                
             </li>
             <li><a href="">Cover Stories</a>
                 <ul>
                     <li><a href="">Catalog One</a></li>
                     <li><a href="">Catalog Two</a></li>
                     <li><a href="">Catalog Three</a></li>
                     <li><a href="">Catalog Four</a></li>
                     <li><a href="">Catalog Five</a></li>
                     <li><a href="">Catalog One</a></li>
                     <li><a href="">Catalog Two</a></li>
                     <li><a href="">Catalog Three</a></li>
                     <li><a href="">Catalog Four</a></li>
                     <li><a href="">Catalog Five</a></li>
                 </ul>                
             </li>
             </ul>
     </div><!-- writing Menu -->    
 </div><!-- mainWrapper Content -->?
 

CSS

#writingMenu a {
     margin: 0px 0px 0px 0px;
     padding: 12px 5px 5px 5px;
     text-align: right;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     -ms-transition: all .3s ease;
     transition: all .3s ease;
     background: #ffffff;
     color: #B3B3B3;
     min-width: 140px !important;
     display: block;
 }
 
 #writingMenu a:hover {
     color: #37342e;
 }
 
 #writingMenu ul li ul {
     position: absolute;
     width: 90%;
     float: left;
     overflow: hidden;
     border-left: thin solid black;
     border-bottom: thin solid black;
     border-right: thin solid black;
     margin-left: -5px;
     padding-top: 5px;
     background-image: url(images/speckled_backgrounddk.jpg);
     display: block;
     height: 0px;
 }
 
 #writingMenu ul li ul li {
     background-image: none;
     float: none;
 }
 
 #writingMenu ul li ul a {
     margin: 0px;
     padding: 0px;
     text-align: left;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     -ms-transition: all .3s ease;
     transition: all .3s ease;
     color: #B3B3B3;
     background-color: transparent;
     background-image: none;
     text-transform: lowercase;
     color: #999999;
 }?
 

---