下拉菜單高度的CSS和jQuery問題

Question

所以我做了一些下拉菜單。 下拉列表全部嵌套在li中。 出於樣式原因，我需要在頁面首次加載時將下拉高度設置為0px，並添加一些填充。 我所有的下拉菜單都有不同的高度。 當我也將100％作為動畫高度時，它不起作用。

這里是一個鏈接： http : //www.jasonfoumberg.com/test/writing.html

如何獲得下拉菜單以使其動畫到適當的高度。 每個下拉菜單都有不同數量的項目。

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嘗試過，但是應該可以

Answer 2

如果您感興趣，我會制作一個基於CSS的dd菜單...

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 -->

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

這里有一個演示： http : //dbwebb.se/style/?id=152