下拉菜单高度的CSS和jQuery问题

Question

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;
}​

Answer 1

        $(document).ready(function() {
    var defHeight = $('ul:first',this).height();
         console.log(defHeight);

        $("ul li").hover(
            function () {

                $('ul:first',this).stop().animate({height : "toggle"});
             }, 
            function () {
                 $('ul:first',this).stop().animate({height : "toggle"});
            }); 
            });

Havent tried but this should work

Answer 2

I'vde made a css-only based dd menu if you're interested...

HTML =>

<!-- by rocky -->
<div id="wrapper">
    <div id='navMenu'>

    <ul>
    <li><a href="#">Menu1</a>

    <ul>

    <li><a href="#">Dropdown1</a></li>
    <li><a href="#">Dropdown2</a></li>
    <li id="submenu"><a href="#">Dropdown3</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>

        <li><a href="#">Submenu2</a></li>
        <li><a href="#">Submenu3</a></li>
        </ul>
    </li>

    </ul> <!-- End of Menu1-->

    </li> <!-- Menu2 -->

    <li><a href="#">Menu2</a>
    <ul>

    <li><a href="#">Dropdown2</a>       </li>
    <li id="submenu"><a href="#">Dropdown2</a>
        <ul>
            <li><a href="#">Dropdown2</a></li>
        </ul>
        </li>
    <li><a href="#">Dropdown2</a></li>

    </ul> <!-- End Inner UL -->

    </li> <!-- ABOUT -->
    <li><a href="#">Menu3</a>
    <ul>

    <li><a href="#">Submenu3</a></li>
    <li id="submenu"><a href="#">Submenu3</a>
        <ul>
    <li><a href="#">Submenu3</a></li>
        </ul>
        </li>
    </ul> <!-- End Inner UL -->

    </li> <!-- End main LI -->
    </ul> <!-- End main UL -->

    </div> <!-- End Nav -->

    </div> <!-- End wrapper -->

And the CSS:

#navMenu {
    margin: 0;
    padding: 0;
}

#navMenu ul{
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#navMenu li{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
}

#navMenu ul li a {
    text-align: center;
    text-decoration: none;
    height: 30px;
    width: 150px;
    display: block;
    color: #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 30px;
}

#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu ul li ul a:hover {
    color: #999;
}

#navMenu ul ul li#submenu ul {
    position: absolute;
    visibility: hidden;
    top: 30px;
}

#navMenu ul ul li#submenu:hover ul {
    margin-top: -30px;
    margin-left: 105px;
    visibility: visible;
}

There is a demo here: http://dbwebb.se/style/?id=152